Comment parcourir des éléments en js

Cette fois, je vais vous montrer comment effectuer le parcours d'éléments en js, et quelles sont les précautions à prendre pour le parcours d'éléments en js. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les navigateurs qui prennent en charge la spécification Element Traversal incluent IE 9+, Firefox 3.5+, Safari 4+, Chrome et Opera 10+.

Pour les espaces entre les éléments, les nœuds de document ne seront pas renvoyés avant IE9, et tous les autres navigateurs renverront les nœuds de document.

Afin d'être compatible avec les différences entre les navigateurs sans modifier le standard DOM existant, la spécification Element Traversal a été créée.

Cette spécification ajoute 5 attributs aux éléments

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

Documentation officielle détaillée ; www.w3.org/TR/ElementTraversal/

Pour les espaces entre les éléments, les versions antérieures à IE9 ne renverront pas de nœuds de texte, tandis que les autres navigateurs renverront des espaces sous forme de nœuds de texte. Cela conduit à un comportement incohérent lors de l’utilisation des propriétés childNodes et firstChild. Afin de compenser cette différence tout en gardant la spécification DOM inchangée, la spécification W3C Element Traversal définit un nouvel ensemble de propriétés.

L'API Element Traversal ajoute les 5 attributs suivants aux éléments DOM :

• childElementCount : renvoie le nombre d'éléments enfants (à l'exclusion des nœuds de texte et des commentaires).

• firstElementChild : pointe vers le premier élément enfant.

• lastElementChild : pointe vers le dernier élément enfant.

• previousElementSibling : pointe vers l'élément frère précédent.

• nextElementSibling : pointe vers l'élément frère suivant.

Les navigateurs pris en charge ont ajouté ces attributs aux éléments DOM. En utilisant ces éléments, vous n'avez pas à vous soucier des nœuds de texte vides, ce qui rend la recherche d'éléments DOM très pratique.

Voici un exemple. Dans le passé, lorsque vous vouliez parcourir tous les éléments enfants d'un élément à travers les navigateurs, vous deviez écrire du code comme celui-ci :

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

Avec les nouveaux attributs d'Element Traversal, le code deviendra très concis :

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour créer un proxy

Comment gérer le scintillement lorsque v-cloak est chargé dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!