JavaScriptのgetElementsByClassNameが配列ではないオブジェクトを提供するのはなぜですか？

Question

私は特定のクラス名を持つページ上のすべての要素のJavaScript（jQueryを使用せず）でリストを取得しようとしています。私はクラスで自分のページ上に3つのアンカー要素を持っている

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

注「拡張」：次のように私はそのためのgetElementsByClassName（）関数を利用します。これは次のようにconsole.log（）出力

[] 0 undefined 

次に、キックのために、私は独自の配列にexpand_buttonsを投げた：

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

をこれが突然

[NodeList[3]] 1 

を出力して、私はクリックすることができますnodelistを通して、ページ上の3つの '展開'アンカー要素の属性を参照してください。 w3schools test pageでコードを動作させることができたことにも注目してください。

document.getElementsByNameを実際に使用すると、（コンソールに）要素の配列が出力されますが、長さを要求すると0が返されます。同様に、アクセスしようとするとarray_name[0]を使用している配列要素は、オブジェクトをコンソールに印刷するときに配列の中に要素があるにもかかわらず、 'undefined'を出力します。

これはなぜでしょうか？私はDOM要素をループしたいので、バニラのJavaScriptでコーディングを練習しようとしているので、今はjQueryを避けています。

おかげで、

ParagonRG

Answer 1

それは、Webブラウザのものであるとして、それはそれほどJavaScriptのことです。そのAPIはネイティブオブジェクト（documentオブジェクト）によって提供され、DOM仕様によってNodeListオブジェクトを返します。 NodeListは配列のように扱うことができますが、それは似ていますが、（あなたが気づいたように）はっきりと異なります。

あなたは常に新しい配列にノード・リストをコピーすることができます。

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

や現代ES2015環境で：

var nodeArr = Array.from(theNodeList); 

JavaScriptは常にいくつかのランタイム・コンテキスト内に存在し、状況がすべての種類を含むことができ、 JavaScriptコードに機能を提供するAPIのWebブラウザは、これらのコンテキストの1つです。 DOMは、JavaScriptにはあまり含まれていない方法で指定されています。これは言語に依存しないインターフェース定義です。

私はこの回答の短いバージョンは "それだけであるから"と思う。オブジェクトそれreturns is "live"ので、それは具体的には、ライブNodeListで、配列を返しません

Answer 2

：ほとんどのケースで

、NodeListのライブコレクションです。これは、DOMツリーの変更がコレクションに反映されることを意味します。