Comment utiliser js Element Traversal pour standardiser le parcours d'éléments

Cette fois, je vais vous montrer comment utiliser js Element Traversal pour standardiser le parcours d'éléments, et quelles sont les précautions pour utiliser js Element Traversal pour standardiser le parcours d'éléments. Ce qui suit est un cas pratique, prenons. un regard.

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

Officiel détaillé documentation ; http://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 traiteront les espaces comme des retours de nœuds. 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 Cela 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. php site chinois !

Lecture recommandée :

Comment utiliser bootstrap dans un projet vue-cli

Comment utiliser Node.Js pour générer Adresse Bitcoin

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!