¿Por qué getElementsByClassName de JavaScript proporciona un objeto que NO es una matriz?

Question

Estoy tratando de obtener una lista en JavaScript (sin jQuery) de todos los elementos en la página con un nombre de clase específico. Por lo tanto, yo empleo la función getElementsByClassName() de la siguiente manera:

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

Tenga en cuenta que tengo tres elementos de anclaje en mi página con la clase 'expandir'. Este console.log() muestra

[] 0 undefined 

A continuación, por diversión, me tiró expand_buttons en su propia matriz de la siguiente manera:

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

Esto da salida repente

[NodeList[3]] 1 

y hacer clic a través de la lista de nodos y ver los atributos de los tres elementos de anclaje "expandir" en la página. También vale la pena señalar que pude hacer que mi código funcionara en un w3schools test page.

También debe tenerse en cuenta que mi uso de document.getElementsByName realmente da como resultado (a la consola) una matriz de elementos, pero cuando pregunto por su longitud, me dice 0. De manera similar, si intento acceder un elemento de matriz que usa array_name[0] como normal, emite 'indefinido', a pesar de que claramente hay un elemento dentro de una matriz cuando imprimo el objeto a la consola.

¿Alguien tiene alguna idea de por qué esto podría ser? Solo quiero recorrer los elementos DOM, y estoy evitando jQuery en este momento porque estoy tratando de practicar la codificación con JavaScript vanidoso.

Gracias,

ParagonRG

Answer 1

No es tanto una cosa JavaScript, ya que es una cosa navegador web. Esa API es suministrada por un objeto nativo (el objeto document), y por la especificación DOM devuelve un objeto NodeList. Puede tratar una NodeList como una matriz, y es similar, pero claramente diferente (como habrá notado).

Siempre se puede copiar un NodeList a una nueva matriz:

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

o en los modernos entornos ES2015:

var nodeArr = Array.from(theNodeList); 

JavaScript existe siempre en un contexto de tiempo de ejecución, y el contexto puede incluir todo tipo de API que proporcionan instalaciones al código JavaScript. Un navegador web es uno de esos contextos. El DOM se especifica de una manera que no es especialmente parcial a JavaScript; es una definición de interfaz neutral para el lenguaje.

Supongo que la versión corta de esta respuesta sería "porque simplemente lo hace".

Answer 2

No devuelve una matriz porque el objeto que returns is "live", en concreto se trata de un vivo NodeList:

En la mayoría de los casos, el NodeList es una colección viva. Esto significa que los cambios en el árbol DOM se reflejarán en la colección.