Element Traversal implémente la traversée d'éléments en détail

Cette fois, je vous apporte une explication détaillée de l'implémentation de la traversée d'éléments par Element Traversal. Quelles sont les précautions pour l'implémentation de la traversée d'éléments par Element Traversal Voici un cas pratique, jetons un coup d'œil.

Pour les espaces entre les éléments, les nœuds de document ne seront pas renvoyés avant IE9. 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

Pour les espaces entre les éléments, les versions antérieures à IE9 ne renverront pas de nœuds de texte, tandis que les espaces des autres navigateurs seront renvoyés sous forme nœuds de texte. Cela conduit à un comportement incohérent lors de l'utilisation des propriétés de 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 numéro des éléments enfants (à l'exclusion des nœuds de texte et des

  annotations).

• 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;
}

et utiliser Element Traversal

pour ajouter l'attribut de , et le code serait Il deviendra très concis :

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

Les navigateurs qui prennent en charge la spécification Element Traversal sont : IE9+, Firfox3.5+, Safari4+, Chrome et Opera10+.

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 implémenter l'algorithme diff dans React

Vue implémente la fonction de liaison de données bidirectionnelle ( avec code)

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!