Warum liefert getElementsByClassName von JavaScript ein Objekt, das NICHT ein Array ist?

Question

Ich versuche, eine Liste in JavaScript (nicht mit jQuery) aller Elemente auf der Seite mit einem bestimmten Klassennamen zu erhalten. Ich bin daher der getElementsByClassName() Funktion verwenden, wie folgt:

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

Bitte beachte, dass ich auf meiner Seite mit der Klasse drei Ankerelemente ‚erweitern‘. Diese console.log() gibt

[] 0 undefined 

nächstes für Tritte, ich expand_buttons in seine eigene Reihe warf wie folgt:

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

Diese plötzlich

gibt

[NodeList[3]] 1 

und ich kann klicken durch die Nodelist und sehen Sie die Attribute der drei 'erweitern' Ankerelemente auf der Seite. Es ist auch erwähnenswert, dass ich meinen Code in einem w3schools test page arbeiten konnte.

Es kann auch sein, dass meine Verwendung von document.getElementsByName tatsächlich (an die Konsole) ein Array von Elementen ausgibt, aber wenn ich nach seiner Länge frage, sagt es mir 0. In ähnlicher Weise, wenn ich versuche, zuzugreifen ein Array-Element mit array_name[0] als normal, gibt es "undefiniert", obwohl eindeutig ein Element innerhalb eines Arrays, wenn ich das Objekt auf der Konsole drucken.

Hat jemand eine Idee, warum dies sein könnte? Ich möchte nur DOM-Elemente durchlaufen, und ich vermeide gerade jQuery, weil ich versuche, mit JavaScript-JavaScript zu programmieren.

Danke,

ParagonRG

Answer 1

Es ist nicht so sehr eine Sache JavaScript, wie es eine Web-Browser Sache. Diese API wird von einem nativen Objekt (dem Objekt document) bereitgestellt, und von der DOM-Spezifikation wird ein NodeList-Objekt zurückgegeben. Sie können eine NodeList wie ein Array behandeln, und es ist ähnlich, aber deutlich anders (wie Sie bemerkt haben).

Sie immer eine NodeList in ein neues Array kopieren:

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

oder in modernen ES2015 Umgebungen:

var nodeArr = Array.from(theNodeList); 

JavaScript existiert immer in einem gewissen Laufzeitkontext und der Kontext aller Art umfassen kann von APIs, die Funktionen für JavaScript-Code bereitstellen. Ein Webbrowser ist einer dieser Kontexte. Das DOM wird in einer Weise angegeben, die für JavaScript nicht besonders ist; Es ist eine sprachneutrale Schnittstellendefinition.

Ich denke, die kurze Version dieser Antwort wäre, "weil es einfach tut."

Answer 2

Es ist nicht einen Array zurück, weil das Objekt, um es returns is "live", und zwar ist es eine Live-NodeList:

In den meisten Fällen ist der NodeList eine Live-Sammlung. Dies bedeutet, dass Änderungen an der DOM-Struktur in der Sammlung widergespiegelt werden.