HTMLCollection

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 です。

js
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

関連情報