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

Faut-il que ce soit forEach ? Vous pourriez simplement utiliser un for boucle pour itérer sur la liste :

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

Answer 2

Eh bien, ça marche pour moi aussi :

const elements = Object.values( document.querySelector(your selector here) )

Object.values() renvoie à Array des valeurs d'un objet donné. NodeList est un objet, comme tout ce qui est en JS.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Mais il n'est pas compatible avec IE, donc je suppose que Array.prototype.*array_method*.call(yourNodeList) est la meilleure option. Avec cette méthode, vous pouvez invoquer n'importe quelle méthode de tableau sur votre fichier NodeList

Answer 3

Cela a fonctionné avec moi dans ES6

supposons que vous ayez une liste de noeuds comme celle-ci

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>

const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Answer 4

J'utilise le modèle suivant parce que je pense qu'il est le plus facile à lire :

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Answer 5

L'ES6 permet d'utiliser des méthodes cool comme var nodeArray = Array.from(nodeList) mais mon préféré est le nouvel opérateur de diffusion.

var nodeArray = Array(...nodeList);