Pourquoi getElementsByClassName de JavaScript fournit-il un objet qui n'est PAS un tableau?

Question

J'essaie d'obtenir une liste en JavaScript (n'utilisant pas jQuery) de tous les éléments de la page avec un nom de classe spécifique. J'emploie donc la fonction getElementsByClassName() comme suit:

var expand_buttons = document.getElementsByClassName('expand'); 
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]); 

Notez que j'ai trois éléments d'ancrage sur ma page avec la classe « élargir ». Cette console.log() Sorties

[] 0 undefined 

Ensuite, pour les coups de pied, je jette expand_buttons dans son propre tableau comme suit:

var newArray = new Array(expand_buttons); 
console.log(newArray, newArray.length); 

Ceci produit tout à coup

[NodeList[3]] 1 

et je peux cliquer sur à travers la nodelist et voir les attributs des trois éléments d'ancrage 'expand' sur la page. Il est également intéressant de noter que j'ai pu faire fonctionner mon code dans un w3schools test page.

Il peut également être à noter que mon utilisation de document.getElementsByName fait effectivement sortir (à la console) un tableau d'éléments, mais quand je demande sa longueur, il me dit 0. De même, si j'essaie d'accéder un élément de tableau utilisant array_name[0] comme d'habitude, il sort 'indéfini', bien qu'il y ait clairement un élément à l'intérieur d'un tableau lorsque j'imprime l'objet sur la console.

Quelqu'un a-t-il une idée de la raison? Je veux juste faire une boucle sur les éléments DOM, et j'évite jQuery en ce moment parce que j'essaye de m'entraîner au codage avec JavaScript en vanilla.

Merci,

ParagonRG

Answer 1

Ce n'est pas tellement une chose JavaScript car il est une chose de navigateur web. Cette API est fournie par un objet natif (objet document) et par la spécification DOM, elle renvoie un objet NodeList. Vous pouvez traiter un NodeList comme un tableau, et c'est similaire, mais nettement différent (comme vous l'avez remarqué).

Vous pouvez toujours copier un NodeList à un nouveau tableau:

var nodeArr = Array.prototype.slice.call(theNodeList, 0); 

ou dans des environnements ES2015 modernes:

var nodeArr = Array.from(theNodeList); 

JavaScript existe toujours dans un contexte d'exécution, et le contexte peut inclure toutes sortes des API qui fournissent des fonctionnalités au code JavaScript. Un navigateur Web est l'un de ces contextes. Le DOM est spécifié d'une manière qui n'est pas spécialement partielle à JavaScript; c'est une définition d'interface neutre.

Je suppose que la version courte de cette réponse serait, "parce que c'est juste le cas."

Answer 2

Il ne retourne pas un tableau parce que l'objet qu'il returns is "live", plus précisément, il est un NodeList en direct:

Dans la plupart des cas, la NodeList est une collection en direct. Cela signifie que les modifications sur l'arborescence DOM seront reflétées dans la collection.