Navegar pelo DOM

Estes são as propriedades que nos permitem navegar entre os nós e elementos do DOM:

Método	Descrição
element.childNodes	Retorna os nós filhos do elemento element
element.chidren	Retorna os elementos filhos do elemento element
element.firstChild	Retorna o primeiro nó filho do elemento element
element.firstElementChid	Retorna o primeiro elemento filho do elemento element
element.lastChild	Retorna o último nó filho do elemento element
element.lastElementChild	Retorna o último elemento filho do elemento element
element.nextSibling	Retorna o próximo nó irmão do elemento element
element.nextElementSibling	Retorna o próximo elemento irmão do elemento element
element.previousSibling	Retorna o nó anterior, irmão do elemento element
element.previousElementSibling	Retorna o elemento anterior, irmão do elemento element
element.parentNode	Retorna o nó pai do elemento element
element.parentElement	Retorna o elemento pai do elemento element

element.childNodes

Retorna os nós filhos do elemento element, tais como nós de elemento, nós de texto e nós de comentário.

Sintaxe:

element.childNodes

Exemplo:

let div = document.getElementById('div1');
let childs = div.childNodes;

Este exemplo retorna todos os nós filhos da div com o id=’div1’.

element.children

Retorna os elementos filhos do elemento element.

Sintaxe:

element.children

Exemplo:

let div = document.getElementById('div1'); 
let childs = div.children; 

Este exemplo retorna todos os elementos filhos da div com o id=’div1’.

element.firstChild

Retorna o primeiro nó filho do elemento element. Pode ser um nó de elemento, um nó de texto ou um nó de comentário.

Sintaxe:

element.firstChild

Exemplo:

let div = document.getElementById('div1'); 
let child = div.firstChild; 

Este exemplo retorna o primeiro nó filho da div com o id=’div1’.

element.firstElementChild

Retorna o primeiro elemento filho do elemento element.

Sintaxe:

element.firstElementChild

Exemplo:

let div = document.getElementById('div1'); 
let child = div.firstElementChild;

Este exemplo retorna o primeiro elemento filho da div com o id=’div1’.

element.lastChild

Retorna o último nó filho do elemento element. Pode ser um nó de elemento, um nó de texto ou um nó de comentário.

Sintaxe:

element.lastChild

Exemplo:

let div = document.getElementById('div1'); 
let child = div.lastChild; 

element.lastElementChild

Retorna o último elemento filho do elemento element.

Sintaxe:

element.lastElementChild

Exemplo:

let div = document.getElementById('div1'); 
let child = div.lastElementChild; 

Este exemplo retorna o último elemento filho da div com o id=’div1’.

element.nextSibling

Retorna o próximo nó irmão do elemento element. Pode ser um nó de elemento, um nó de texto ou um nó de comentário.

Sintaxe:

element.nextSibling

Exemplo:

let elem = document.getElementById('p1'); 
let sib = elem.nextSibling;

Este exemplo retorna o próximo nó, irmão do elemento com o id ‘p1’.

element.nextElementSibling

Retorna o próximo elemento irmão do elemento element.

Sintaxe:

element.nextElementSibling

Exemplo:

let elem = document.getElementById('p1'); 
let sib = elem.nextElementSibling();

Este exemplo retorna o próximo elemento, irmão do elemento com o id ‘p1’.

element.previousSibling

Retorna o nó irmão anterior do elemento element. Pode ser um nó de elemento, um nó de texto ou um nó de comentário.

Sintaxe:

element.previousSibling

Exemplo:

let elem = document.getElementById('p1'); 
let sib = elem.previousSibling;

Este exemplo retorna o nó anterior, irmão do elemento com o id ‘p1’.

element.previousElementSibling

Retorna o elemento irmão anterior do elemento element.

Sintaxe:

element.previousElementSibling

Exemplo:

let elem = document.getElementById('p1'); 
let sib = elem.previousElementSibling; 

Este exemplo retorna o elemento anterior, irmão do elemento com o id ‘p1’.

element.parentNode

Retorna o nó pai do elemento element. Pode ser um nó de elemento, um nó de texto ou um nó de comentário.

Sintaxe:

element.parentNode

Exemplo:

let elem = document.getElementById('p1'); 
let par = elem.parentNode; 

Este exemplo retorna o nó pai do elemento com o id ‘p1’.

element.parentElement

Retorna o elemento pai do elemento element.

Sintaxe:

element.parentElement

Exemplo:

let elem = document.getElementById('p1'); 
let par = elem.parentElement; 

Este exemplo retorna o elemento pai do elemento com o id ‘p1’.

Atravessar o DOM de forma recursiva

Podemos usar uma função recursiva para atravessar todo o DOM e obter dessa forma todos os nós:

function traverse(no){ 
   console.log(no.nodeType + ", " + no.nodeName + ", " + no.nodeValue); 

   //obtém todos os nós filhos 
   let nodes = no.childNodes;
 
   //percorre os nós filhos e obtém os filhos destes de forma recursiva 
   for(let i=0; i<nodes.length; i++){ 
      traverse(nodes[i]); 
   } 
} 
traverse(document.body);