Parcours du DOM
La recherche d'éléments en fonction de l'ID, du type d'élément et du nom de classe est très utile, mais que se passe-t-il si vous souhaitez rechercher un élément en fonction de sa position dans l'arborescence DOM ? En d’autres termes, vous disposez d’un élément donné et vous souhaitez rechercher son parent, l’un de ses enfants et son nœud frère précédent ou suivant. Par exemple, prenons le code HTML fragmentaire suivant :
Listing 1 : Fragment HTML (un tableau)
<tableau>
<tête>
<tr>
<th>Nom</th>
<th>Adresse e-mail</th>
<th>Actions</th>
</tr>
</tête>
<corps>
<tr id="row-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Modifier</a>
<a href="#">Supprimer</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Modifier</a>
<a href="#">Supprimer</a></td>
</tr>
</tbody>
</table>
Le listing 1 utilise l'indentation pour indiquer l'emplacement de chaque nœud d'élément dans l'arborescence DOM. Dans cet exemple, l'élément table est l'élément racine et possède deux nœuds enfants, thead et tbody. L'élément thead a un nœud enfant tr et tr a trois enfants - tous les éléments. L'élément tbody a deux nœuds enfants tr et chaque nœud tr a trois enfants. Le troisième nœud de chaque ligne ci-dessus contient en outre des nœuds enfants, qui sont tous deux deux balises de lien.
Comme vous le savez, vous pouvez facilement sélectionner un élément par ID à l'aide de la fonction select d'un framework JavaScript . Dans cet exemple, il y a deux éléments avec des ID, qui sont des éléments tr avec les ID row-001 et row-002. Pour sélectionner le premier tr à l'aide de la bibliothèque Prototype, vous pouvez utiliser le code suivant :
var theRow = $('row-001');
Dans le chapitre précédent, vous avez également appris à utiliser des sélecteurs pour récupérer des éléments en fonction de leur type ou de leur classe. Dans cet exemple, vous pouvez utiliser la syntaxe suivante pour obtenir tous les éléments td.
var toutes les cellules = $$('td');
Le principal problème avec la modification du code est qu'il renvoie chaque élément td. Mais que se passe-t-il si vous souhaitez simplement obtenir tous les éléments td de tr avec l'ID row-001 ? C'est là que les fonctions de traversée du DOM entrent en jeu. Tout d’abord, utilisons le prototype pour sélectionner tous les enfants de tr avec l’ID row-001.
var firstRowCells = theRow.childElements();
Cela renverra un tableau de tous les éléments enfants de la variable Row (le tr que vous avez initialement défini avec l'ID row-001).
Supposons ensuite que vous souhaitiez uniquement obtenir le premier élément enfant de la ligne. Dans ce cas, il s'agit de l'élément td contenant le texte "Joe Lennon". Pour ce faire, utilisez l'instruction suivante :
var firstRowFirstCell = theRow.down();
C'est si simple ! Cet usage spécifique équivaut à :
var firstRowFirstCell = theRow.childElements()[0];
Cela peut aussi s’exprimer ainsi :
var firstRowFirstCell = theRow.down(0);
Les index JavaScript commencent à zéro, donc l'instruction ci-dessus indique essentiellement à JavaScript de sélectionner le premier élément enfant. Pour sélectionner le deuxième élément enfant (la cellule contenant l'adresse e-mail [email protected] ), vous utiliserez :
var firstRowSecondCell = theRow.down(1);
Vous pouvez également parcourir le DOM entre les nœuds frères. Dans cet exemple, la deuxième cellule est la sœur suivante de la première cellule. Par conséquent, vous pouvez utiliser l'instruction suivante :
var firstRowSecondCell = firstRowFirstCell.next();
Tout comme la fonction down() fonctionne, la sélection de la troisième cellule peut être utilisée comme ceci.
var firstRowThirdCell = firstRowFirstCell.next(1);
En plus d'utiliser des index pour rechercher des nœuds spécifiques, la bibliothèque Prototype peut également utiliser la syntaxe du sélecteur CSS. Dans le listing 1, nous recherchons le deuxième lien (le lien « supprimer ») qui contient les informations sur Jill Mac Sweeney.
var secondRowSecondLink = $('row-002').down('a', 1);
Dans cet exemple, utilisez la fonction $ pour rechercher la ligne portant l'ID row-002, en descendant jusqu'au deuxième descendant d'un élément (l'ancre).
Certains frameworks autorisent également la fonctionnalité de traversée en « daisy-chaining », ce qui signifie que vous pouvez connecter les commandes de traversée les unes aux autres. Dans l'exemple ci-dessus, une autre expression de la bibliothèque Prototype est la suivante :
var secondRowSecondLink = $('row-002').down('a').next();
Jetez un œil à l’exemple suivant :
var domTraversal = $('row-001').down().up().next().previous();
Comme vous pouvez le constater, le chaînage en série vous permet de connecter plusieurs instructions de traversée du DOM. En fait, l'exemple ci-dessus finit par sélectionner l'élément tr avec l'ID ligne-001, de sorte que la connexion en série revient à son point de départ.
Adresse de réimpression : http://www.denisdeng.com/?p=708
Adresse d'origine : http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html