Travessia de DOM
Encontrar elementos com base em ID, tipo de elemento e nome de classe é muito útil, mas e se você quiser encontrar um elemento com base em sua posição na árvore DOM? Em outras palavras, você tem um determinado elemento e deseja encontrar seu pai, um de seus filhos e seu irmão do nó anterior ou seguinte. Por exemplo, pegue o seguinte código HTML fragmentado:
Listagem 1: fragmento HTML (uma tabela)
<tabela>
<thead>
<tr>
<th>Nome</th>
<th>Endereço de e-mail</th>
<th>Ações</th>
</tr>
</thead>
<corpo>
<tr id="linha-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Editar</a>
<a href="#">Excluir</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Editar</a>
<a href="#">Excluir</a></td>
</tr>
</tbody>
</tabela>
A Listagem 1 usa recuo para indicar a localização de cada nó de elemento na árvore DOM. Neste exemplo, o elemento table é o elemento raiz e possui dois nós filhos, thead e tbody. O elemento thead possui um nó filho tr e tr possui três filhos - todos os elementos. O elemento tbody possui dois nós filhos tr e cada nó tr possui três filhos. O terceiro nó em cada linha acima contém ainda nós filhos, sendo que ambos são duas tags de link.
Como você sabe, você pode selecionar facilmente um elemento por ID usando a função select de uma estrutura JavaScript . Neste exemplo, existem dois elementos com IDs, que são elementos tr com IDs linha-001 e linha-002. Para selecionar o primeiro tr usando a biblioteca Prototype, você pode usar o seguinte código:
var theRow = $('row-001');
No capítulo anterior, você também aprendeu como usar seletores para recuperar elementos com base em seu tipo ou classe. Neste exemplo, você pode usar a seguinte sintaxe para obter todos os elementos td.
var todasCélulas = $$('td');
O principal problema com a alteração do código é que ele retorna todos os elementos td. Mas e se você quiser apenas obter todos os elementos td de tr com ID row-001? É aqui que as funções de passagem do DOM entram em ação. Primeiro, vamos usar o protótipo para selecionar todos os filhos de tr com ID linha-001.
var firstRowCells = theRow.childElements();
Isso retornará uma matriz de todos os elementos filhos da variávelRow (o tr que você definiu inicialmente com o ID row-001).
A seguir, vamos supor que você deseja obter apenas o primeiro elemento filho da linha. Neste caso, esse é o elemento td que contém o texto “Joe Lennon”. Para fazer isso, use a seguinte instrução:
var firstRowFirstCell = theRow.down();
Tão simples! Este uso específico é equivalente a:
var firstRowFirstCell = theRow.childElements()[0];
Também pode ser expresso assim:
var firstRowFirstCell = theRow.down(0);
Os índices JavaScript começam em zero, então a instrução acima basicamente diz ao JavaScript para selecionar o primeiro elemento filho. Para selecionar o segundo elemento filho (a célula que contém o endereço de e-mail [email protected] ), você usaria:
var firstRowSecondCell = theRow.down(1);
Como alternativa, você pode navegar no DOM entre nós irmãos. Neste exemplo, a segunda célula é o próximo irmão da primeira célula. Portanto, você pode usar a seguinte declaração:
var firstRowSecondCell = firstRowFirstCell.next();
Assim como a função down() funciona, a seleção da terceira célula pode ser usada assim.
var firstRowThirdCell = firstRowFirstCell.next(1);
Além de usar índices para localizar nós específicos, a biblioteca Prototype também pode usar sintaxe de seletor CSS. Na Listagem 1, procuramos o segundo link (o link "remover") que contém os detalhes de Jill Mac Sweeney.
var segundoRowSecondLink = $('row-002').down('a', 1);
Neste exemplo, use a função $ para encontrar a linha com ID row-002, percorrendo um elemento até o segundo descendente (a âncora).
Algumas estruturas também permitem a funcionalidade de travessia de "encadeamento em série", o que significa que você pode conectar comandos de travessia entre si. No exemplo acima, outra expressão da biblioteca Prototype é a seguinte:
var segundoRowSecondLink = $('row-002').down('a').next();
Dê uma olhada no seguinte exemplo:
var domTraversal = $('row-001').down().up().next().previous();
Como você pode ver, o encadeamento em série permite conectar várias instruções de passagem do DOM. Na verdade, o exemplo acima acaba selecionando o elemento tr com ID row-001, de modo que a cadeia está de volta ao ponto inicial.
Endereço de reimpressão: http://www.denisdeng.com/?p=708
Endereço original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html