Navegar pelo DOM em JavaScript significa mover-te entre elementos HTML siguiendo a sua hierarquia familiar: de pais para filhos, de filhos para pais ou entre irmãos. Dominar esta navegação é clave quando precisas selecionar elementos aninhados sem depender de IDs ou classes específicas.

A ideia central é simple: cada elemento do DOM tem relações familiares (pai, filho, irmão, ancestral) e podes percorrê-las com métodos nativos de JavaScript como children, parentNode ou closest.

O que significa percorrer o DOM e quando usar essa técnica

Percorrer o DOM (também chamado DOM traversal) é o processo de mover-te entre nós relacionados a partir de um elemento de referência. Imagina que tens um item de lista dentro de um ul, dentro de um menu, dentro de um header. Se selecionas o item, podes subir até o cabeçalho ou descer desde o cabeçalho até o item sem ter que selecionar cada elemento intermediário pelo seu ID.

Na aula, o ponto de partida é um elemento com id="parent", que é uma lista não ordenada com quatro filhos diretos. A partir daí, exploras duas direções: descendente (de pais para filhos) e ascendente (de filhos para pais).

¿Qué es o DOM traversal? É a técnica de navegar entre elementos HTML aproveitando suas relações de parentesco no DOM, sem precisar selecionar cada um por ID ou classe. [01:55]

Como navegar de pais para filhos no DOM

A navegação descendente parte de um elemento pai e desce até seus filhos. O primeiro paso é selecionar o pai com document.getElementById("parent") e guardá-lo numa constante.

A partir desse pai, tens vários métodos disponíveis para acessar os filhos:

• parent.children devolve uma coleção HTML com todos os filhos diretos.
• parent.firstElementChild traz o primeiro filho da coleção.
• parent.lastChild traz o último filho.
• parent.childNodes devolve todos os nós, incluindo nós de texto.

Na prática da aula, o pai tem quatro filhos. O primeiro não tem classe, enquanto os outros três têm a classe menu-items. Por isso, ao usar firstElementChild, sabes que chegaste ao elemento correto porque é o único sem classe.

Como uso firstElementChild e lastChild corretamente

firstElementChild ignora nós de texto e devolve sempre o primeiro elemento HTML real. lastChild, por outro lado, pode retornar um nó de texto se houver espaços em branco no final, então usa lastElementChild quando quiseres garantir um elemento.

Um detalhe importante que aparece na aula: erros de digitação ao escrever os nomes dos métodos quebram o código. JavaScript diferencia maiúsculas e minúsculas, então firstChild e firstElementChild são coisas diferentes.

Como acessar irmãos e tios com previousSibling e nextSibling

Nem sempre o que procuras está abaixo. Às vezes precisas mover-te lateralmente entre elementos do mesmo nível. Para isso usas:

• previousSibling para o irmão anterior.
• nextSibling para o irmão seguinte.

No exemplo da aula, o pai (a lista ul) tem como irmão anterior uma tag <p> e como irmão seguinte uma tag <section>. Esses elementos não são filhos do pai, mas estão no mesmo nível hierárquico, como se fossem tios dos itens da lista.

javascript const parent = document.getElementById("parent"); const children = parent.children; const firstChild = parent.firstElementChild;

¿Cuál es a diferença entre filho e irmão no DOM? Um filho está dentro do elemento pai. Um irmão está no mesmo nível hierárquico, compartilhando o mesmo pai. [09:30]

Como navegar de filhos para pais usando parentNode e closest

A navegação ascendente é igualmente útil. Partindo de um filho, podes subir na hierarquia com três métodos principais:

• children.parentNode devolve o nó pai imediato.
• children.parentElement devolve o elemento pai (similar, mas garante que seja um elemento).
• children.closest("selector") busca o ancestral mais próximo que coincida com o seletor indicado.

O método closest é especialmente potente. Na aula, partindo de um item de lista, closest("menu") sobe pela árvore até encontrar o elemento menu, que seria como o avô do item. Não importa quantos níveis tenha que subir: ele encontra o ancestral mais próximo que combine com o seletor.

Quando usar parentNode versus closest

Usa parentNode quando só precisas subir um nível. Usa closest quando o ancestral pode estar a vários níveis de distância e queres encontrá-lo por seletor (tag, classe ou ID), sem te importares com a profundidade exata.

javascript const children2 = document.querySelector("li"); const parent2 = children2.parentNode; const grandparent = children2.closest("menu");

Por que praticar navegação no DOM com diferentes estruturas HTML

A mejor forma de internalizar estes métodos é experimentar. Pega uma estrutura HTML aninhada, seleciona um elemento qualquer e tenta chegar a outro usando apenas relações familiares. Combina children, firstElementChild, parentNode, closest, previousSibling e nextSibling.

Não é o cenário mais frequente no dia a dia, mas quando aparece um caso onde não tens IDs nem classes para selecionar diretamente, saber percorrer o DOM resolve o problema rapidamente.

Quais métodos de traversal usas com mais frequência no teu código? Conta nos comentários como te organizas para navegar entre elementos aninhados.