En JavaScript, quelle est la meilleure façon de convertir une NodeList en tableau ?

Question

La méthode DOM document.querySelectorAll() (et quelques autres) renvoient un NodeList .

Pour opérer sur la liste, par exemple à l'aide de forEach() le NodeList doit d'abord être converti en un Array .

Quelle est la meilleure façon de convertir le NodeList à un Array ?

Answer 1

Avec ES6, vous pouvez simplement faire :

const spanList = [...document.querySelectorAll("span")];

Answer 2

Avec ES6, vous pouvez utiliser Array.from(myNodeList) . Utilisez ensuite votre méthode de tableau préférée.

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

Utilisez un Cale ES6 pour que cela fonctionne aussi dans les anciens navigateurs.

---

Si vous utilisez un transpilateur (par exemple Babel), il existe deux autres possibilités :

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});

Answer 3

Vous pouvez le convertir en un tableau en utilisant la fonction slice de la méthode Array prototype :

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

---

De plus, si tout ce dont vous avez besoin est forEach vous pouvez invoquer que de la Array sans le transformer d'abord en tableau :

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

---

En ES6, vous pouvez utiliser le nouveau Array.from pour le convertir en tableau :

Array.from(elList).forEach(function(el) {
    console.log(el);
});

Cette fonction n'est actuellement disponible que dans les navigateurs les plus récents, mais si vous êtes utiliser un service polyfill vous aurez accès à cette fonction dans tous les domaines.

---

Si vous utilisez un transpilateur ES6 vous pouvez même utiliser un for..of à la place :

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

Answer 4

Pourquoi se convertir ? - juste call fonction de Array directement sur la collection d'éléments ;)

[].forEach.call( $('a'), function( v, i) {
    // do something
});

en supposant que $ est votre alias pour querySelectorAll bien sûr.

---

edit : ES6 permet une syntaxe encore plus courte [...$('a')] ( fonctionne uniquement dans Firefox, à partir de mai 2014 )

Answer 5

Mise à jour 2020 : nodeList.forEach() est maintenant un standard officiel et pris en charge par tous les navigateurs actuels.

Les navigateurs plus anciens peuvent utiliser le polyfill ci-dessous.

Pour opérer sur la liste en javascript, par exemple en utilisant forEach(), la NodeList doit être convertie en Array.

Ce n'est pas vrai. .forEach() fonctionne dans les navigateurs actuels. S'il est absent, vous pouvez utiliser un polyfill pour ajouter .forEach() à partir de Array a Liste de nœuds et cela fonctionne bien :

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Vous pouvez maintenant courir :

myNodeList.forEach(function(node){...})

Pour itérer sur les NodeLists comme sur les Arrays.

Cela produit un code beaucoup plus court et plus propre que .call() partout.