recorrido DOM
Encontrar elementos según su ID, tipo de elemento y nombre de clase es muy útil, pero ¿qué sucede si desea buscar un elemento según su posición en el árbol DOM? En otras palabras, tiene un elemento determinado y desea encontrar su padre, uno de sus hijos y su nodo hermano anterior o siguiente. Por ejemplo, tomemos el siguiente código HTML fragmentario:
Listado 1: fragmento HTML (una tabla)
<tabla>
<cabeza>
<tr>
<th>Nombre</th>
<th>Dirección de correo electrónico</th>
<th>Acciones</th>
</tr>
</thead>
<tcuerpo>
<tr id="fila-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Editar</a>
<a href="#">Eliminar</a></td>
</tr>
<tr id="fila-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Editar</a>
<a href="#">Eliminar</a></td>
</tr>
</tbody>
</tabla>
El Listado 1 utiliza sangría para indicar la ubicación de cada nodo de elemento en el árbol DOM. En este ejemplo, el elemento de la tabla es el elemento raíz y tiene dos nodos secundarios, thead y tbody. El elemento thead tiene un nodo hijo tr y tr tiene tres hijos, todos th elementos. El elemento tbody tiene dos nodos secundarios tr y cada nodo tr tiene tres nodos secundarios. El tercer nodo en cada línea anterior contiene además nodos secundarios, los cuales son dos etiquetas de enlace.
Como sabe, puede seleccionar fácilmente un elemento por ID utilizando la función de selección de un marco de JavaScript . En este ejemplo, hay dos elementos con ID, que son elementos tr con ID fila-001 y fila-002. Para seleccionar el primer tr usando la biblioteca Prototype, puede usar el siguiente código:
var theRow = $('fila-001');
En el capítulo anterior, también aprendió a usar selectores para recuperar elementos según su tipo o clase. En este ejemplo, puede utilizar la siguiente sintaxis para obtener todos los elementos td.
var todas las celdas = $$('td');
El principal problema al cambiar el código es que devuelve cada elemento td. Pero, ¿qué pasa si solo desea obtener todos los elementos td de tr con ID fila-001? Aquí es donde entran en juego las funciones transversales del DOM. Primero, usemos el prototipo para seleccionar todos los hijos de tr con ID fila-001.
var firstRowCells = theRow.childElements();
Esto devolverá una matriz de todos los elementos secundarios de la variable Row (el tr que configuró inicialmente con ID fila-001).
A continuación, supongamos que sólo desea obtener el primer elemento secundario de la fila. En este caso, ese es el elemento td que contiene el texto "Joe Lennon". Para hacer esto, use la siguiente declaración:
var firstRowFirstCell = theRow.down();
¡Tan simple! Este uso específico equivale a:
var firstRowFirstCell = theRow.childElements()[0];
También se puede expresar así:
var firstRowFirstCell = theRow.down(0);
Los índices de JavaScript comienzan en cero, por lo que la declaración anterior básicamente le dice a JavaScript que seleccione el primer elemento secundario. Para seleccionar el segundo elemento secundario (la celda que contiene la dirección de correo electrónico [email protected] ), usaría:
var firstRowSecondCell = theRow.down(1);
Alternativamente, puede explorar el DOM entre nodos hermanos. En este ejemplo, la segunda celda es la siguiente hermana de la primera celda. Por lo tanto, puede utilizar la siguiente declaración:
var primeraRowSecondCell = primeraRowFirstCell.next();
Al igual que funciona la función down(), seleccionar la tercera celda se puede usar así.
var primeraRowThirdCell = primeraRowFirstCell.next(1);
Además de utilizar índices para buscar nodos específicos, la biblioteca Prototype también puede utilizar la sintaxis del selector CSS. En el Listado 1, buscamos el segundo enlace (el enlace "eliminar") que contiene los detalles de Jill Mac Sweeney.
var secondRowSecondLink = $('row-002').down('a', 1);
En este ejemplo, use la función $ para encontrar la fila con ID fila-002, recorriendo hasta el segundo elemento descendiente (el ancla).
Algunos marcos también permiten la funcionalidad transversal de "conexión en cadena", lo que significa que puede conectar comandos transversales entre sí. En el ejemplo anterior, otra expresión de la biblioteca Prototype es la siguiente:
var secondRowSecondLink = $('row-002').down('a').next();
Eche un vistazo al siguiente ejemplo:
var domTraversal = $('row-001').down().up().next().previous();
Como puede ver, la conexión en cadena le permite conectar múltiples declaraciones transversales DOM. De hecho, el ejemplo anterior termina seleccionando el elemento tr con ID de fila-001, por lo que la cadena vuelve al punto donde comenzó.
Dirección de reimpresión: http://www.denisdeng.com/?p=708
Dirección original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html