Compreensão da Hierarquia e dos Relacionamentos do DOM

A travessia do DOM envolve percorrer a estrutura do documento usando JavaScript para acessar, modificar ou interagir com diferentes nós. O DOM é estruturado como uma árvore com nós conectados em uma hierarquia, incluindo relações de pai, filho e irmão:

• Nó Pai: Um nó que possui outros nós aninhados dentro dele;
• Nós Filhos: Nós diretamente dentro de um nó pai;
• Nós Irmãos: Nós que compartilham o mesmo pai e estão no mesmo nível.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Nesta estrutura:

• <ul> é o pai dos elementos <li>;
• Cada <li> é um filho do <ul>;
• Os dois elementos <li> são irmãos entre si.

Navegação no DOM

JavaScript fornece várias propriedades para navegar por essas relações, permitindo mover-se entre os nós de forma eficiente.

ParentNode

A propriedade parentNode permite acessar o elemento pai do nó atual. É útil quando é necessário navegar para cima na árvore do DOM.

Neste exemplo, parentNode acessa o elemento pai <ul> do <li> selecionado e adiciona uma borda em toda a lista.

ChildNodes

A propriedade childNodes retorna uma coleção de todos os nós filhos de um determinado elemento, incluindo nós de texto (espaços em branco entre elementos).

Este exemplo seleciona a lista de tarefas e percorre seus filhos, adicionando preenchimento a cada elemento <li>.

FirstChild e LastChild

firstChild: Acessa o primeiro filho de um elemento, incluindo nós de texto.
lastChild: Acessa o último filho de um elemento, incluindo nós de texto.

Suponha que seja necessário destacar o primeiro e o último itens em um carrinho de compras.

Este exemplo destaca o primeiro e o último itens em uma lista, demonstrando como acessar e modificar os primeiros e últimos nós.

Devido ao fato de que firstChild e lastChild frequentemente se referem a nós de texto (como espaços em branco) em vez dos nós de elemento propriamente ditos (<li>), uma abordagem melhor é utilizar firstElementChild e lastElementChild, que direcionam especificamente para o primeiro e o último elementos filhos, ignorando quaisquer nós de texto.

PreviousSibling e NextSibling

nextSibling: Recupera o próximo nó irmão do nó atual.
previousSibling: Recupera o nó irmão anterior do nó atual.

Considere a navegação entre tarefas em uma lista de afazeres, marcando tarefas como "próxima" ou "já concluída".

Neste cenário:

• nextSibling avança para a próxima tarefa e a marca como "próxima";
• previousSibling marca a tarefa anterior como concluída.

No entanto, nextSibling e previousSibling frequentemente apontam para nós de texto (como espaços em branco). Para acessar apenas os nós de elemento (<li>), deve-se utilizar nextElementSibling e previousElementSibling, que ignoram especificamente os nós de texto.

Exemplo Prático: Gerenciador de Tarefas

Imagine que estamos construindo um gerenciador de tarefas onde os usuários podem adicionar, destacar e gerenciar tarefas. Queremos atualizar as tarefas dinamicamente, marcar a primeira tarefa como "prioridade", destacar a próxima tarefa como "próxima" e marcar a última tarefa como "concluída". Este exemplo demonstrará a navegação pelo DOM utilizando parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling e previousElementSibling.

Quando o botão "Destacar Tarefas" é clicado, o JavaScript aplica estilos distintos às tarefas com base em sua posição. O firstElementChild marca a primeira tarefa como "Prioridade" com estilo em negrito e amarelo. O lastElementChild marca a última tarefa como "Concluída" com efeitos em verde e tachado. O nextElementSibling destaca a segunda tarefa como "Próxima" em azul e, se existir um irmão anterior, ele recebe uma borda azul.