HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTMLCollection インターフェイスは、（文書内の順序における）要素の汎用的な集合（arguments のような配列風のオブジェクト）を表し、リストから選択するためのメソッドとプロパティを提供します。
HTMLCollection
arguments
メモ: このインターフェイスは歴史的な理由で HTMLCollection と呼ばれています（現代の DOM より前では、このインターフェイスを実装する集合が、アイテムとして HTML 要素しか持てませんでした）。
HTML DOM 内の HTMLCollection は生きて (live) います。元になった文書が変更された時点で自動的に更新されます。このため、ノードを追加、変更、削除する場合はコピーを（Array.from などを使用して）作成しておくといいでしょう。
Array.from
メモ: このインターフェイスは変更不可能なリストを作成しようとするものでした。そして、既に使用されているコードの動作を保証するだけのために対応が続いていました。現代の API では、ECMAScript の配列型をラップした型を使用しているため、ECMAScript の配列のように扱うことができ、同時にその使用法に追加の意味づけを行うことができます（アイテムを読み取り専用にするなど）。
HTMLCollection.length
collection 内のアイテム数を返します。
HTMLCollection.item()
リスト内の指定された index (先頭はゼロ) 位置にある特定の要素を返します。index が範囲外なら null を返します。
index
null
これは collection[i] のアクセスの代替手段です（こちらは i が範囲外の場合は undefined を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。
collection[i]
i
undefined
HTMLCollection.namedItem()
name で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素が name 属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合は null を返します。
name
これは collection[name] のアクセスの代替手段です（こちらは name が存在しない場合、 undefined を返します）。これは主に、 JavaScript 以外の DOM 実装で有用です。
collection[name]
HTMLCollection は、自身のメンバーを名前とインデックスでプロパティとして公開します。 HTML の ID は : や . を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在、 HTMLCollection オブジェクトは純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML では許容しています。
:
.
例えば、文書内に 1 つの <form> 要素があるものと仮定してください。その id は myForm です。
<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"];
Enable JavaScript to view this browser compatibility table.
NodeList
HTMLFormControlsCollection
HTMLOptionsCollection