Maison  >  Article  >  interface Web  >  Que signifie nodelist ?

Que signifie nodelist ?

WBOY
WBOYoriginal
2022-07-04 16:56:302506parcourir

nodelist signifie liste de nœuds. C'est un objet en JavaScript. Il s'agit d'un objet de type tableau utilisé pour enregistrer un ensemble ordonné de nœuds ; l'objet nodelist est similaire à l'objet HTMLCollection, et les éléments de l'objet sont accessibles par. indice.

Que signifie nodelist ?

L'environnement d'exploitation de cet article : système Windows 10, nodejs version 12.19.0, ordinateur Dell G3.

nodelist Qu'est-ce que

NodeList est un objet en JavaScript, un objet de type tableau utilisé pour enregistrer un ensemble ordonné de nœuds

Objet NodeList

L'objet NodeList est une liste de nœuds obtenue à partir du document (rassembler).

L'objet NodeList est similaire à l'objet HTMLCollection.

Certaines méthodes des anciens navigateurs (telles que getElementsByClassName()) renvoient des objets NodeList au lieu d'objets HTMLCollection.

La propriété childNodes de tous les navigateurs renvoie un objet NodeList.

QuerySelectorAll() de la plupart des navigateurs renvoie un objet NodeList.

Les éléments de NodeList sont accessibles par index (en commençant à 0).

La liste des nœuds se tient à jour. Si un élément est supprimé ou ajouté à la liste de nœuds ou au document XML, la liste est automatiquement mise à jour.

Remarque : Dans une liste de nœuds, les nœuds sont renvoyés dans le même ordre que celui spécifié dans le document XML.

Propriété d'objet NodeList

length renvoie le nombre de nœuds dans la liste de nœuds.

Méthode objet NodeList

item() renvoie le nœud avec le numéro d'index spécifié dans la liste des nœuds.

Les exemples sont les suivants :

Instance 1 :

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

L'objet d'instance NodeList peut être une collection dynamique ou une collection statique. La collection dite dynamique est une collection vivante. Si l'arborescence DOM supprime ou ajoute un nœud associé, cela sera immédiatement reflété dans l'interface NodeList.

Dans le code ci-dessus, parent.childNodes renvoie un objet instance NodeList. Lorsque le nœud parent ajoute un nœud enfant, le nombre de membres de l'objet augmente de 1. Node.childNodes renvoie une collection dynamique.

La méthode document.querySelectorAll renvoie une collection statique. Les modifications au sein du DOM ne seront pas reflétées dans le résultat renvoyé par cette méthode en temps réel.

L'objet d'instance d'interface NodeList fournit l'attribut de longueur et l'index numérique, vous pouvez donc utiliser l'index numérique pour récupérer chaque nœud comme un tableau, mais ce n'est pas un tableau lui-même et vous ne pouvez pas utiliser de méthodes spécifiques au tableau telles que pop ou pousser. [

Exemple 2 :

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>

Dans le code ci-dessus, la partie index numérique de myNodeList est parcourue à travers la boucle for, les membres correspondant aux 3 index sont renvoyés et l'attribut length est correctement renvoyé à 3.

Le deuxième membre de l'objet d'instance myNodeList est accessible via la méthode item(). Étant donné que les index numériques commencent à compter à partir de zéro, pour récupérer le deuxième membre, utilisez l'index numérique 1.

Tous les objets de type tableau peuvent utiliser l'opérateur crochet pour supprimer des membres, donc généralement, la méthode NodeList[index] est utilisée à la place de la méthode item.

Apprentissage recommandé : "Tutoriel vidéo Nodejs"

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn