HTMLCollection
HTMLCollection
インターフェイスは、(文書内の順序における)要素の汎用的な集合(arguments
のような配列風のオブジェクト)を表し、リストから選択するためのメソッドとプロパティを提供します。
メモ: このインターフェイスは歴史的な理由で HTMLCollection
と呼ばれています(現代の DOM より前では、このインターフェイスを実装する集合が、アイテムとして HTML 要素しか持てませんでした)。
HTML DOM 内の HTMLCollection
は生きて (live) います。元になった文書が変更された時点で自動的に更新されます。このため、ノードを追加、変更、削除する場合はコピーを(Array.from
などを使用して)作成しておくといいでしょう。
メモ: このインターフェイスは変更不可能なリストを作成しようとするものでした。そして、既に使用されているコードの動作を保証するだけのために対応が続いていました。現代の API では、ECMAScript の配列型をラップした型を使用しているため、ECMAScript の配列のように扱うことができ、同時にその使用法に追加の意味づけを行うことができます(アイテムを読み取り専用にするなど)。
インスタンスプロパティ
HTMLCollection.length
読取専用-
collection 内のアイテム数を返します。
インスタンスメソッド
HTMLCollection.item()
-
リスト内の指定された
index
(先頭はゼロ) 位置にある特定の要素を返します。index
が範囲外ならnull
を返します。これは
collection[i]
のアクセスの代替手段です(こちらはi
が範囲外の場合はundefined
を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。 HTMLCollection.namedItem()
-
name
で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素がname
属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合はnull
を返します。これは
collection[name]
のアクセスの代替手段です(こちらはname
が存在しない場合、undefined
を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。
JavaScript での使用法
HTMLCollection
は、自身のメンバーを名前とインデックスでプロパティとして公開します。 HTML の ID は :
や .
を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在、 HTMLCollection
オブジェクトは純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML では許容しています。
例えば、文書内に 1 つの <form>
要素があるものと仮定してください。その id
は myForm
です。
let elem1, elem2;
// document.forms は HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // 表示: "true"
elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // 表示: "true"
elem1 = document.forms["named.item.with.periods"];
仕様書
Specification |
---|
DOM Standard # interface-htmlcollection |
ブラウザーの互換性
BCD tables only load in the browser