6

特定のクラス名を持つページ上のすべての要素の JavaScript (jQuery を使用しない) のリストを取得しようとしています。したがって、次のように getElementsByClassName() 関数を使用します。

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

私のページには、「expand」クラスを持つ 3 つのアンカー要素があることに注意してください。この console.log() 出力

[] 0 undefined

次に、キックのために、次のように expand_buttons を独自の配列にスローしました。

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

これは突然出力されます

[NodeList[3]] 1

ノードリストをクリックすると、ページ上の 3 つの「展開」アンカー要素の属性が表示されます。また、 w3schools テスト ページでコードを動作させることができたことも注目に値します。

document.getElementsByName を使用すると、実際には (コンソールに) 要素の配列が出力されることにも注意してください。ただし、その長さを尋ねると、0 と表示されます。array_name[0]通常どおり、オブジェクトをコンソールに出力すると、配列内に明らかに要素があるにもかかわらず、「未定義」が出力されます。

なぜこれが考えられるのか、誰にも分かりますか？私はDOM要素をループしたいだけで、バニラJavaScriptでコーディングを練習しようとしているので、現時点ではjQueryを避けています。

ありがとう、

パラゴンRG

4

2 に答える 2

10

これは Web ブラウザーのことなので、JavaScript のことではありません。その API はネイティブ オブジェクト (documentオブジェクト) によって提供され、DOM 仕様によって NodeList オブジェクトを返します。NodeList を配列のように扱うことができます。これは似ていますが、明確に異なります (お気付きのように)。

NodeList はいつでも新しい配列にコピーできます。

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

または最新の ES2015 環境では:

var nodeArr = Array.from(theNodeList);

JavaScript は常に何らかのランタイム コンテキストに存在し、コンテキストには JavaScript コードに機能を提供するあらゆる種類の API を含めることができます。Web ブラウザーは、それらのコンテキストの 1 つです。DOM は、JavaScript にとって特に部分的ではない方法で指定されています。これは、言語に依存しないインターフェイス定義です。

この答えの短いバージョンは、「そうするだけだから」だと思います。

于 2012-06-16T15:08:40.203 に答える
3

返されるオブジェクトは "live"、具体的にはライブNodeListであるため、配列は返されません。

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

于 2012-06-16T15:11:27.740 に答える