Como os Nós do DOM Existem Relativamente Uns aos Outros na Árvore DOM?
Vamos aprender sobre os nós do DOM e seus relacionamentos na árvore do DOM.
Assim como uma árvore real tem galhos grandes e pequenos conectados em uma estrutura hierárquica, os nós do DOM também têm relações diretas e indiretas entre si. Usaremos este exemplo para ilustrar essas relações:
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree Example</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>html. É o contêiner de nível superior para todo o conteúdo de um documento HTML. Todos os outros nós são descendentes deste nó raiz.
Então, abaixo do nó raiz, encontramos outros nós na hierarquia. Um nó pai é um elemento que contém outros elementos. Um nó filho é um elemento que está contido dentro de outro elemento.
Neste exemplo, o elemento body é o pai do elemento parágrafo enquanto o elemento parágrafo é um filho do elemento body. Estes elementos são representados como nós na árvore DOM com os mesmos relacionamentos.
Assim como temos nós pais e nós filhos, também temos nós irmãos. Nós irmãos são elementos que compartilham o mesmo pai. No nosso exemplo, dois elementos de item de lista compartilham o mesmo pai de lista não ordenada, então eles são irmãos.
Da mesma forma, os elementos h1 e parágrafo são irmãos porque compartilham o mesmo pai, o elemento body.
Também temos relacionamentos indiretos entre diferentes níveis na hierarquia. Nós descendentes são elementos que estão contidos dentro de outro elemento, seja direta ou indiretamente. Um elemento é considerado um descendente de outro se ele puder ser alcançado percorrendo a árvore DOM para baixo a partir do seu ancestral.
No nosso exemplo, os elementos li da lista são descendentes do elemento body, já que eles estão indiretamente contidos dentro dele.
Um nó ancestral é um elemento que está mais acima na hierarquia da árvore DOM do que outro elemento. No nosso exemplo, o elemento body é um ancestral dos elementos de item de lista li.
Entender essas relações é essencial para manipular e navegar na árvore DOM usando JavaScript.Este módulo não possui perguntas. Marque como concluído.