Navegar pelo DOM

Navegar pelo DOM, significa percorrer o documento HTML de forma a encontrar um ou mais elementos com base na sua relação hierárquica com os outros elementos.

Os elementos numa página HTML estão organizados numa forma hierárquica, numa árvore de elementos, uma espécie de árvore genealógica em que existem elementos pai (parent), que por sua vez têm elementos filhos (children) e estes possuem elementos irmãos (siblings). Um elemento tem antepassados e pode ter descendentes.

Podemos observar essa árvore hierárquica na figura abaixo:

É com esta hierarquia que podemos percorrer um documento HTML de forma a seleccionar um ou mais elementos com base na sua relação hierárquica com outros elementos.
O jQuery oferece uma variedade de métodos que nos permite percorrer o DOM.

Com os métodos abaixo, vamos poder viajar para cima, para baixo e para os lados na árvore DOM.

Selecionar antepassados (ascendentes)

Três métodos permitem atravessar a árvore DOM de forma a encontrar elementos antepassados de um determinado elemento:

  • parent(): devolve o elemento pai (parente) do elemento selecionado
  • parents(): devolve todos os elementos antepassados do elemento selecionado
  • parentsUntil(): devolve todos os elementos ancestrais entre os dois elementos dados

parent()

Devolve o elemento pai (parente) do elemento seleccionado. Este método permite sómente atravessar um único nível na árvore DOM.

Exemplo :

O exemplo a seguir retorna o elemento pai de cada um dos elementos <span>:

$(document).ready(function(){ 
   $("span").parent(); 
});

parents()

O método parents() retorna todos os elementos antepassados do elemento selecionado, até à raiz do documento (<html>).

Exemplo :

O exemplo a seguir retorna todos os ancestrais de todos os elementos <span> que são elementos <ul>:

$(document).ready(function(){ 
   $("span").parents("ul"); 
});

parentsUntil

O método parentsUntil() retorna todos os elementos antepassados entre os dois elementos dados.

Exemplo :

$(document).ready(function(){ 
   $("span").parentsUntil("div"); 
});

Selecionar descendentes

O JQuery possui dois métodos úteis para percorrer e seleccionar elementos no sentido
descendente:

  • children(): devolve todos os filhos diretos do elemento selecionado
  • find(): devolve todos os elementos descendentes do elemento selecionado, até ao último descendente.

chidren()

Devolve todos os filhos directos do elemento seleccionado.

Este método permite somente atravessar um único nível para baixo da árvore DOM.

Exemplo 1:

O exemplo a seguir retorna todos os elementos que são filhos diretos de cada um dos elementos <div>:

$(document).ready(function(){ 
   $("div").children(); 
});

Exemplo 2:

Você também pode usar um parâmetro opcional para filtrar a pesquisa para as crianças.

O exemplo a seguir retorna todos os elementos <p> com o nome da classe “1”, que são filhos diretos de <div>:

$(document).ready(function(){ 
   $("div").children("p.1"); 
});

find()

O método find() retorna elementos descendentes do elemento selecionado, até ao último descendente.

Exemplo 1:

O exemplo a seguir retorna todos os elementos <span> que são descendentes de <div>:

$(document).ready(function(){ 
   $("div").find("span"); 
});

Exemplo 2: O exemplo a seguir retorna todos os descendentes de <div>:

$(document).ready(function(){ 
   $("div").find("*"); 
});

Selecionar irmãos (siblings)

O jQuery possui vários métodos para selecionar elementos que estão no mesmo nível, ou seja elementos irmãos (siblings), do elemento selecionado:

  • siblings(): devolve todos os elementos irmãos do elemento selecionado
  • next(): devolve o próximo elemento irmão do elemento selecionado
  • nextAll(): devolve todos os próximos elementos irmãos do elemento selecionado
  • nextUntil(): devolve todos os elementos irmãos próximos entre dois elementos dados
  • prev(): devolve o elemento anterior irmão do elemento selecionado
  • prevAll(): devolve todos os elementos irmãos anteriores do elemento selecionado
  • prevUntil(): devolve todos os elementos irmãos anteriores entre dois elementos dados

siblings()

O método siblings() devolve todos os elementos irmãos do elemento seleccionado.

Exemplo 1:

O exemplo a seguir retorna todos os elementos irmãos de <h2>:

$(document).ready(function(){ 
   $("h2").siblings(); 
});

Exemplo 2:

Também se pode usar um parâmetro opcional para filtrar a busca de irmãos.

O exemplo a seguir retorna todos os elementos irmãos de <h2> que são elementos <p> :

$(document).ready(function(){ 
   $("h2").siblings("p"); 
});

next()

O método next() retorna o próximo elemento irmão do elemento selecionado.

Este método retorna apenas um elemento.

Exemplo :

O exemplo a seguir devolve o próximo irmão de <h2>:

$(document).ready(function(){ 
   $("h2").next(); 
});

nextAll()

O método nextAll() retorna todos os próximos elementos irmãos do elemento selecionado.

Exemplo :

O exemplo a seguir retorna todos os elementos irmãos próximos de <h2>:

$(document).ready(function(){ 
   $("h2").nextAll(); 
});

nextUntil()

O método nextUntil() retorna todos os próximos elementos irmãos entre dois argumentos dados.

Exemplo :

O exemplo a seguir retorna todos os elementos irmãos entre um elemento <h2>e um elemento <h6>:

$(document).ready(function(){ 
   $("h2").nextUntil("h6"); 
});

NOTA:

Os métodos prev(), prevAll() e prevUntil(), funcionam como os métodos acima, mas com a funcionalidade inversa: eles retornam elementos irmãos anteriores (atravessar para trás ao longo elementos irmãos na árvore DOM, em vez de para a frente).