Résumé des méthodes JS pour obtenir des nœuds enfants, parents et frères et sœurs

Cet article présente principalement un résumé des méthodes d'obtention de nœuds enfants, parents et frères et sœurs en JS et deux méthodes d'obtention de nœuds frères et sœurs en JS. Les amis intéressés par JS peuvent se référer à cet article

. Nous sommes en cours de développement, il est souvent nécessaire d'obtenir un certain élément HTML dans la page et de mettre à jour dynamiquement le style de l'élément, les attributs de contenu, etc.

Nous savons déjà que les méthodes suivantes sont fournies en JavaScript pour obtenir des nœuds enfants, parents et frères et sœurs :

　　 Regular

Obtenez le nœud enfant via le nœud parent :

parentObj.firstChild Obtenez le parent connu Le dernier nœud enfant du nœud
parentObj.childNodes Get le tableau de nœuds enfants du nœud parent connu (ici, j'obtiens tous les nœuds enfants directs dans IE 7)
parentObj.children Obtenez les enfants directs d'un nœud connu Tableau de nœuds (même effet que childNodes dans IE7)
parentObj.
getElementsByTagName(tagName) Renvoie un tableau de nœuds enfants avec la valeur spécifiée dans le nœud enfant connu

Obtient les frères via les nœuds adjacents Nœud :

neighbourNode.previousSibing Récupère le précédent nœud frère du nœud connu

neighbourNode.nextSibing Obtenez le prochain frère du nœud connu Le nœud frère

obtient le nœud parent via le nœud enfant :

1. childNode.parentNode Obtenez le nœud parent d'un nœud connu

La méthode ci-dessus peut essentiellement être utilisée de manière récursive, parentObj.firstChild.firstChild.firstChild... Mais il existe un code comme celui-ci Se précipitant bêtement. .

　

Extension

Avant d'étendre, nous devons connaître quelques connaissances de base sur les nœuds : dans les nœuds Dom, chaque nœud a un type différent

Les types de nœuds Dom couramment utilisés dans les spécifications du W3C sont les suivants

Type de nœud	Description	Valeur
Nœud d'élément	Chaque balise HTMLIls sont tous un nœud d'élément	1
Nœud d'attribut	Attributs du nœud d'élément (balise HTML), tels que l'identifiant, la classe, le nom , etc.	2
Nœud de texte	Contenu du texte dans le nœud d'élément ou le nœud d'attribut	3
Noeud de commentaire	est le commentaire du document, sous la forme	8
Le nœud de document	représente l'intégralité du document (le nœud racine de l'arborescence Dom, c'est-à-dire le document)	9

Concernant les noms de nœuds, différents types de nœuds correspondent à différents noms

节点类型	节点名称
元素节点	HTML的名称（大写）
属性节点	属性的名称
文本节点	它的值永远的都#text
文档节点	它的值永远都是#document

Vous pouvez renvoyer le type de nœud, le nom du nœud et la valeur du nœud respectivement via nodeType (type de nœud), nodeName (nom du nœud) et nodeValue (valeur du nœud) (par exemple, les nœuds d'élément renvoient 1, les nœuds d'attribut renvoient 2)

Deux façons d'obtenir des nœuds frères et sœurs dans JS

Méthode 1 : Trouvez d'abord les "éléments frères et sœurs", y compris vous-même via les éléments enfants de l'élément parent. Ensuite, éliminez-vous

function sibling(elem){
 var a = [];
 var b = elem.parentNode.children;
 for (var i = 0 ; i < b.length ; i++){
  if(b[i] !== elem) a.push(b[i]);
 }
 return a;
}

Méthode 2 : Implémentez la méthode dans jQuery, trouvez d'abord le premier élément enfant de l'élément, puis continuez à trouver l'élément adjacent suivant, jugez. et éliminez-vous.

siblings:function(elem)
{
  return JQuery.sibling(elem.parentNode.firstNode,elem);
}
JQuery.sibling = function(n,elem){
  var r = [];
  for (;n;n= n.nextSibling){
  if(n.nodeType == 1 && （！elem || elem != elem))
  r.push(n);
 } 
  return r;
}

Ce code peut être trouvé dans jQuery 1.2 et versions ultérieures. Dans la version de jQuery 1.2.3 que j'ai consultée, ce code se trouve à la ligne 1800 :

Mettez ceci. méthode Converti en une fonction utilisable indépendamment :

fucntion sibling(elem){
 var r = [];
 var n = elem.parentNode.firstChild;
 for(;n;n = n.nextSibling) {
  if(n.nodeType === 1 && n !== elem) {
   r.push(n);
  }
 } 
  return r;
}

De toute évidence, trouver les éléments frères d'un nœud spécifique de cette manière peut facilement éviter la redondance de la récursion.

Obtenir tous les nœuds enfants des éléments

En JavaScript, vous pouvez obtenir tous les nœuds enfants via les enfants (retourner uniquement le HTML, pas même renvoyer les nœuds enfants ), qui est pris en charge par presque tous les navigateurs, mais n'est pas pris en charge dans certaines versions de Firefox.

Remarque : dans IE, les enfants contiennent des nœuds d'annotation

Ainsi, en raison de l'existence de circonstances particulières, nous devons parfois obtenir uniquement les nœuds d'éléments, afin de pouvoir filtrer par l'attribut nodeType, en utilisant La connaissance ci-dessus : les nœuds avec nodeType == 1 sont des nœuds d'éléments.

Ci-dessous, définissez une fonction à partir de pour obtenir tous les nœuds enfants des éléments :

var getChildNodes = function(elem) {
 var childArr = elem.children || elem.childNodes, 
   childArrTem = new Array();
  for (var i = 0 ; i < childArr.length; i ++ ) {
   if (childArr[i].nodeType == 1){
   childArrTem.push(childArr[i]); 
  }
 } 
 return childArrTem;
}

Obtenir tous les nœuds parents

De même, nous pouvons obtenir tous les nœuds parents du nœud actuel :

function getParents （elem）{
 var parents = [];
 while(elem.parentNode){
  parents.push(elem.parentNode)
  elem = elem.parentNode;
 } 
 return parents;
}

De cette façon, nous pouvons accepter un nœud dom et éventuellement obtenir l'objet document si nous en avons seulement besoin. pour en tirer le meilleur parti La couche supérieure est le corps. Vous pouvez modifier le jugement en : while（elem.parentNode && elem.parentNode.tagName == 'BODY'

Selon les méthodes et les connaissances associées fournies en JavaScript pour obtenir des nœuds, nous pouvons écrire de nombreuses méthodes d'encapsulation. Essayez-le. Combien de façons d'obtenir des nœuds peuvent être écrites ?

Après avoir écrit une encapsulation des nœuds opérationnels, il sera beaucoup plus facile de regarder le code source de la méthode de nœud Opération Dom dans jQuery.

Recommandations associées :

Implémentation JavaScript du changement automatique de musique et tutoriel d'exemple de carrousel

Explication détaillée du plug-in JavaScript Onglet

Analyse de l'utilisation de la liaison de fonction JavaScript

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!