HTML5 - Navegação em árvore DOM

Dentro de um documento HTML Podemos navegar entre os diferentes elementos que pertencem à árvore DOM, para isso temos a estrutura hierárquica e podemos usar vários métodos com os quais podemos abordar as relações dos documentos.
Navegue na árvore DOM
Como mencionamos, a navegação pode ser feita através da estrutura hierárquica visualizando o esquema como uma árvore, desta forma podemos tratar os elementos como pais, filhos, irmãos.
Com isso, a busca por um elemento pode ser feita seguindo a filosofia de uma busca por relacionamento.
Vamos ver os métodos disponíveis antes de passar para as aplicações práticas:

· childNodes: Retorna todos os elementos filhos do elemento pai.

· primeiro filho: Retorna o elemento que é o primeiro filho de um elemento pai.

· hasChildNodes (): Retorna verdadeiro ou verdadeiro se o elemento atual tiver nós filhos.

· lastChild: Retorna o último filho de um elemento no documento.

· próximo irmão: Retorna o elemento irmão definido pelo elemento HTML atual.

· parentNode: Retorna o elemento pai do elemento HTML atual.

· irmão anterior: Retorna o elemento irmão antes do elemento HTML atual.

Depois de sabermos quais métodos temos disponíveis, veremos um exemplo de código simples com o qual entenderemos do que se trata a navegação. Árvore DOM.

 Exemplo 

Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.
 
Um dos aspectos mais interessantes da fruta é a variedade disponível em cada país. Eu moro perto de Londres, em uma área conhecida por suas maçãs.
Pai, primeiro filho, anterior, irmão, próximo, irmão

O que esse código consegue é ser capaz de navegar entre os elementos e, uma vez que os sombreia em cinza claro para poder diferenciar em que parte do documento estamos, vamos ver na imagem como devemos vê-lo em nosso navegador:

Como podemos ver, esta forma de colocar os elementos dentro do DOM nos ajuda quando não temos certeza dos identificadores ou quando é uma estrutura dinâmica, mas definida.
Com isso finalizamos este tutorial, onde pudemos buscar elementos em um documento HTML sem depender de identificadores ou nomes de elementos, simplesmente utilizando seu relacionamento na estrutura hierárquica.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo