web-dev-qa-db-fra.com

Objet NodeList en javascript

Quelqu'un peut-il me dire quel type d'objet est la NodeList? J'ai lu qu'il s'agissait d'un objet ressemblant à un tableau et qu'on pouvait y accéder via une notation entre crochets, par exemple var a = someNode.childNode[0];. Comment cela est-il possible puisque, via la notation entre crochets, nous ne pouvons accéder qu'aux propriétés d'un objet, et comme je le sais, nous ne pouvons pas avoir 

javascriptnodelist
39
ppoliani

Un NodeList est une collection de DOM elements. C'est comme un tableau (mais ça ne l'est pas). Pour pouvoir l'utiliser, vous devez le transformer en un tableau JavaScript standard. L'extrait suivant peut faire le travail pour vous.

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

METTRE À JOUR:

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]
44
brielov

NodeList est un objet hôte et n'est pas soumis aux règles habituelles qui s'appliquent aux objets JavaScript natifs. En tant que tel, vous devez vous en tenir à l'API documentée correspondante, qui se compose d'une propriété length et d'un accès à ses membres via la syntaxe d'accès de la propriété entre crochets. Vous pouvez utiliser cette API pour créer une Array contenant un instantané des membres du NodeList:

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}
39
Tim Down

NodeList n'est pas un objet Javascript essentiel, il est fourni par le navigateur avec le DOM. Pensez à une fonction qui renvoie une interface à un objet dynamique ou réel. Par conséquent, forEach () n’est pas disponible, mais vous pouvez le convertir en un tableau réel pour obtenir un instantané avec par exemple 

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

Détails: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

10
Torsten Becker

JavaScript est comme l'alcool, il peut contraindre:

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});
9
user1248475

NodeLists "live", c'est-à-dire qu'ils sont mis à jour lorsque la structure du document change, de sorte qu'ils sont toujours à jour avec les informations les plus précises. En réalité, tous les objets NodeList sont des requêtes qui sont exécutées sur le DOM chaque fois qu’on y accède.

Chaque fois que vous souhaitez effectuer une itération sur une liste de noeuds, il est préférable d’initialiser une deuxième variable avec la longueur, puis de comparer l’itérateur à cette variable: 

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

NodeList est un tableau semblable à une structure, mais ce n'est pas réellement un tableau. Vous pouvez accéder aux valeurs de tableau via la notation entre crochets.

9
Ionut Popa

Les listes de nœuds sont souvent implémentées en tant qu'itérateurs de nœuds avec un filtre. Cela signifie qu'obtenir une propriété comme length est O(n) , et parcourir la liste en revérifiant que sa longueur sera O (n ^ 2).

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

Il vaut mieux faire ceci à la place:

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
}

Cela fonctionne bien pour toutes les collections et les tableaux tant que le tableau ne contient pas d'éléments traités comme des booléens faux.

Dans les cas où vous parcourez les noeuds enfant, vous pouvez également utiliser les propriétés firstChild et nextSibling.

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}
7
Sudharshan

Maintenant, dans ES2015, vous pouvez utiliser la méthode Array.from qui crée une instance Array à partir de n'importe quel objet de type tableau. Cela devrait donc fonctionner:

const divList = Array.from( document.getElementsByTagName("div") );

Pour plus d'informations: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

6
Mahmoud Felfel

Résumé:

Un objet NodeList est une structure de données qui représente une collection de nœuds. Les nœuds dans le contexte du DOM peuvent être les suivants:

  1. Le document lui-même
  2. Éléments DOM (éléments HTML/SVG)
  3. Texte
  4. commentaires

NodeList est not un tableau, cependant NodeList est une structure de données iterable, ce qui signifie que nous pouvons effectuer une boucle sur les valeurs (c'est-à-dire les éléments de nœud) à l'aide d'une boucle for..of. De plus, leur fonction utilitaire Nice sur le prototype de la NodeList rend le travail avec eux plus pratique.

Exemple:

const parent = document.querySelector('.parent');
const myNodeList1 = parent.childNodes; // this property is a Nodelist
console.log(myNodeList1 instanceof NodeList);

const myNodeList2 = document.querySelectorAll('.foo'); // this method returns a Nodelist
console.log(myNodeList2 instanceof NodeList);

// looping over the items of a nodelist
for (let el of myNodeList2) {
  el.innerHTML = 'hi';
}

// getting the length of a nodeList 
console.log(myNodeList2.length);
<div class="parent">
  <div class="foo"></div>
  <div class="foo"></div>
</div>

Voici à quoi ressemble une Nodelist dans le navigateur (chrome) devtools:

 enter image description here

Vous pouvez accéder aux éléments d'une NodeList avec la notation suivante:

 myNodelist[0]; // grabs the first item of the NodeList

Parce que vous êtes simplement une valeur de propriété de l'objet à l'aide d'une clé. Dans cet exemple, la clé de la propriété était le nombre zéro et value était l'élément DOM.

0
Willem van der Veen