Compreender o DOM é essencial em sua carreira de desenvolvimento web. Você deve saber como selecionar diferentes elementos no DOM, para poder ler seu conteúdo ou modificá-lo.

A travessia do DOM descreve como navegar na estrutura semelhante a uma árvore que os documentos HTML geram. Aqui está um guia completo sobre como percorrer o DOM com JavaScript.

O que é DOM Traversing?

O Modelo de Objeto de Documento, ou DOM para abreviar, é uma representação em árvore de um documento HTML. Ele fornece um API que permite que você, como desenvolvedor da Web, interaja com um site usando JavaScript.

Cada item no DOM é conhecido como um nó. Somente por meio do DOM você pode manipular a estrutura, o conteúdo e o estilo do documento HTML.

Traversal DOM (também chamado de caminhada ou navegação no DOM) é o ato de selecionar nós na árvore DOM de outros nós. Você provavelmente já está familiarizado com vários métodos para acessando elementos na árvore DOM por seu id, classe ou nome de tag. Você pode usar métodos como document.querySelector() e document.getElementById() para fazer isso.

Existem outros métodos que você pode usar em conjunto para navegar no DOM de maneiras mais eficientes e robustas. Como você pode imaginar, é melhor pesquisar a partir de um ponto já conhecido em um mapa do que fazer uma pesquisa completa.

Por exemplo, selecionar um elemento filho de seu pai é mais fácil e eficiente do que procurá-lo em toda a árvore.

Um documento de amostra para percorrer

Depois de ter acesso a um determinado nó na árvore DOM, você pode acessar seus nós relacionados de diferentes maneiras. Você pode mover para baixo, para cima ou para os lados na árvore DOM de seu nó selecionado.

O primeiro método envolve procurar um elemento começando com um nó superior (como o nó do documento) e movendo-se para baixo.

A segunda maneira é oposta: você se move de um elemento interno para cima na árvore, procurando por um elemento externo. O último método é quando você procura um elemento de outro elemento no mesmo nível (o que significa que os dois elementos são irmãos) na árvore do documento.

Para demonstrar, considere este exemplo de documento HTML:

<!DOCTYPE html>
<html idioma ="pt">
<cabeça>
<meta charset="UTF-8" />
<meta http-equiv="Compatível com X-UA" conteúdo="IE=borda" />
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1,0" />
<título>Página de exemplo</title>
</head>
<corpo>
<principal>
<h1>Título da minha página</h1>
<p>Bela legenda vai aqui</p>


<classe do artigo="primeiro artigo">
<h2>Lista de frutas incríveis</h2>
<p>Deve comer frutas</p>


<classe div ="invólucro-1">
<ul classe="lista de maçãs">
<classe li ="maçã">Maçãs</li>
<classe li ="laranja">laranjas</li>
<classe li ="abacate">abacate</li>
<classe li ="uva">
 Uvas


<ul>
<classe li ="tipo 1">gotas de lua</li>
<li>Sultana</li>
<li>Concórdia</li>
<li>carmesim sem sementes</li>
</ul>
</li>
<classe li ="banana">banana</li>
</ul>


<classe de botão ="btn-1">Leia a lista completa</button>
</div>
</article>


<classe do artigo="segundo__artigo">
<h2>Lugares incríveis no Quênia</h2>
<p>Deve visitar lugares no Quênia</p>


<classe div ="invólucro-2">
<ul classe="lista de lugares">
<li>Maasai Mara</li>
<li>Praia Diani</li>
<li>Praia Watamu</li>
<li>parque nacional de amboseli</li>
<li>Lago Nakuru</li>
</ul>


<classe de botão ="btn-2">Leia a lista completa</button>
</div>
</article>
</main>
</body>
</html>

Atravessando o DOM para baixo

Você pode percorrer o DOM para baixo usando um dos dois métodos. O primeiro é o método seletor comum (element.querySelector ou element.querySelectorAll). Em segundo lugar, você pode usar o crianças ou childNodes propriedade. Existem também duas outras propriedades especiais, a saber, últimoFilho e primeiro filho.

Usando Métodos Seletores

Os métodos querySelector() permitem que você pesquise um ou mais elementos que correspondam a um determinado seletor. Por exemplo, você pode procurar o primeiro elemento com uma classe de "primeiro-artigo" usando document.querySelector('.first-article'). E para buscar tudo h2 elementos no documento, você pode usar o querySelectorAll método: document.querySelectorAll('h2'). O querySelectorAll o método retorna uma lista de nós de elementos correspondentes; você pode selecionar cada item usando a notação de colchetes:

const títulos = documento.querySelectorAll('h2');
const primeiroCabeçalho = cabeçalhos[0]; // selecionando o primeiro elemento h2
const segundoCabeçalho = cabeçalhos[1]; // selecionando o segundo elemento h2

O principal problema ao usar métodos seletores é que você deve usar os símbolos apropriados, quando aplicável, antes do seletor, como você faz em CSS. Por exemplo, ".classname" para classes e "#id" para ids.

Lembre-se de que o resultado será um elemento HTML, não apenas o conteúdo interno do elemento selecionado. Para acessar o conteúdo você pode usar o nó do HTML interno propriedade:

documento.querySelector('.orange').innerHTML

Usando as propriedades children ou childNodes

O crianças A propriedade seleciona todos os elementos filho que estão diretamente abaixo de um determinado elemento. Aqui está um exemplo do crianças propriedade em ação:

const appleList = documento.querySelector('.lista-apple');
const maçãs = appleList.children; 
console.log (maçãs);

Exploração madeireira maçãs para o console exibirá um conjunto de todos os itens da lista diretamente sob o elemento com uma classe "apple-list" como uma coleção HTML. Uma coleção HTML é um objeto semelhante a uma matriz, portanto, você pode usar a notação de colchetes para selecionar itens, como em querySelectorAll.

Ao contrário do crianças propriedade, childNodes retorna todos os nós filhos diretos (não apenas elementos filhos). Se você estiver interessado apenas em elementos filho, digamos apenas itens de lista, use o crianças propriedade.

Usando propriedades especiais lastChild e firstChild

Esses dois métodos não são tão robustos quanto os dois primeiros. Como seus nomes sugerem, os últimoFilho e primeiro filho As propriedades retornam o último e o primeiro nó filho de um elemento.

const appleList = documento.querySelector('.lista-apple');
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;

Atravessando o DOM para cima

Você pode navegar até o DOM usando o parentElement (ou parentNode) e mais próximo propriedades.

Usando parentElement ou parentNode

Ambos parentElement ou parentNode As propriedades permitem selecionar o nó pai do elemento selecionado um nível acima. A diferença crítica é que parentElement escolhe apenas o nó pai que é um elemento. Por outro lado, parentNode pode selecionar um pai independentemente de ser um elemento ou um tipo de nó diferente.

No exemplo de código abaixo, usamos parentElement para selecionar o div com a classe "wrapper-1" de "apple-list":

const appleList = documento.querySelector('.lista-apple');
const parentDiv = appleList.parentElement; 
console.log (parentDiv); // exibe o elemento div com a classe wrapper-1

Usando a propriedade mais próxima

O mais próximo A propriedade seleciona o primeiro elemento pai que corresponde a um seletor especificado. Ele permite que você selecione vários níveis em vez de um. Por exemplo, se já tivermos o botão com a classe "btn-1" selecionado, podemos selecionar o principal elemento usando o mais próximo propriedade da seguinte forma:

const btn1 = documento.querySelector('.btn-1');
const mainEl = btn1.closest('principal');
console.log (mainEl); // exibe o elemento principal

Como querySelector e querySelectorAll, use os seletores apropriados no mais próximo método.

Atravessando o DOM lateralmente

Existem dois métodos disponíveis para percorrer o DOM lateralmente. Você pode usar próximoElementoIrmão ou anteriorElementoIrmão. Usar próximoElementoIrmão para selecionar o seguinte elemento irmão e anteriorElementoIrmão para selecionar o irmão anterior.

const laranja = documento.querySelector('.laranja');
const maçã = orange.previousElementSibling;
const abacate = orange.nextElementSibling;

Existem também equivalentes próximoirmão e irmão anterior propriedades que também selecionam todos os tipos de nó, não apenas elementos.

Faça mais encadeando propriedades e métodos de travessia do DOM

Todos os métodos e propriedades acima podem permitir que você selecione qualquer nó no DOM. No entanto, em alguns casos, você pode querer mover primeiro para cima, depois para baixo ou para os lados. Nesse caso, encadear diferentes propriedades será útil.