htmlcollectionとは？初心者にも分かる使い方と基礎を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

htmlcollectionとは何か

htmlcollectionは、ウェブページのDOMで動的に取得できる「要素の集合」を表すオブジェクトです。配列のように要素へ順番にアクセスできる一方で、多くの場合は“ライブ”に変化する特徴を持ちます。これは、DOMの構造が変わるとHTMLCollectionの内容も自動的に更新されることを意味します。

HTMLCollectionの基本

取得方法は、document.getElementsByTagName('div') や document.getElementsByClassName('class') などがあり、返されるのはHTMLCollectionです。インデックス番号で要素を取り出すことができ、lengthプロパティで要素数を知ることができます。

どう使うのか

例: var items = document.getElementsByClassName('item'); console.log(items.length); items[0].textContent ...

HTMLCollectionとNodeListの違い

項目	HTMLCollection	NodeList
取得元	getElementsByTagName, getElementsByClassName など	querySelectorAll など
ライブ性	多くはライブ。DOM変更で更新	静的（取得時点で固定）

使いどころの例

特定のクラス名やタグ名で一括して操作したい場合に有効です。要素の追加・削除に強い反面、配列と同じように利用する際に長さの確認やインデックスの存在チェックを忘れずに行いましょう。

まとめ

HTMLCollectionはDOM操作の基本ツールの一つで、動的なページ要素の取り扱いにとても役立ちます。取得方法とライブ性、NodeListとの違いを理解して使い分けることが、JavaScriptを使ったWeb開発の第一歩です。

項目	HTMLCollection	NodeList
取得元	getElementsByTagNameや getElementsByClassName	querySelectorAllなど
ライブ性	多くがライブ	静的

この内容を踏まえ、実際のコードで動かしてみると理解が深まります。

htmlcollectionの同意語

HTMLCollection: HTMLCollectionは、HTMLドキュメント内の要素の集合を表すオブジェクトです。配列のように要素へアクセスでき、lengthプロパティやitem(index)メソッドで順番に要素を取得します。
HTMLコレクション: HTMLCollectionの日本語表現です。HTML要素の集合を指す用語で、同じく要素をまとめて操作するオブジェクトを指します。
要素コレクション: DOM APIにおけるHTML要素の集合を指す総称です。複数の要素をまとめて扱うコレクションを意味します。
DOM要素コレクション: DOM（Document Object Model）内の要素の集合を示す用語。document.getElementsByClassNameやgetElementsByTagNameの戻り値として現れることが多いです。
HTML要素の集合: HTMLドキュメント内の要素を集約した説明表現です。実務ではHTMLCollectionの内容を指す際に使われることがあります。
ドキュメント要素コレクション: ドキュメント内の要素の集合を表す表現です。HTMLCollectionと同種のコレクションを指す場合に用いられます。
要素集合: HTML要素の集合を指す短い表現です。文脈次第でHTMLCollectionの意味で使われることがあります。

htmlcollectionの対義語・反対語

単一のHTML要素: HTMLCollectionが複数のHTML要素を集めたコレクションであるのに対し、これは1つのHTML要素だけを指す概念です。コード上は1要素のElement/HTMLElementオブジェクトとなることが多いです。
単一要素: 1つの要素オブジェクトを指す対概念。複数要素を格納するHTMLCollectionの反対側で、1つの要素に焦点を当てます。
単一ノード: 1つのDOMノード（通常はElementノード）を指す言い方。HTMLCollectionは複数ノードの集合なので、それが対になるイメージです。
非コレクション: コレクションではなく、1つの item を指す性質を強調する語。HTMLCollectionの対比として使われることがあります。
Element（単一ノードの型）: DOMの基本的な要素ノードを表すインターフェースで、HTMLCollectionの集合とは違い、単一ノードを扱います。
HTMLElement（単一要素の型）: HTML要素を表す具体的な型。複数要素の集合であるHTMLCollectionの対として、単一の要素オブジェクトをイメージさせます。

htmlcollectionの共起語

HTMLCollection: HTMLCollectionは、HTML要素のコレクションで、getElementsByTagNameやgetElementsByClassNameなどのDOMメソッドが返す。配列のようにインデックスアクセスができ、lengthプロパティで要素数を取得できます。通常はライブコレクションで、DOMの変更に応じて自動で更新されます。
NodeList: NodeListは、querySelectorAllなどのメソッドが返す要素ノードのコレクション。多くは静的（ライブではない）で、lengthとインデックスで要素を参照できます。
getElementsByTagName: 指定したタグ名の要素をすべて取得するDOMメソッド。返り値はHTMLCollection（ライブ）です。
getElementsByClassName: 指定したクラス名を持つ要素をすべて取得するDOMメソッド。返り値はHTMLCollection（ライブ）です。
querySelectorAll: CSSセレクタに一致するすべての要素を取得するDOMメソッド。返り値はNodeList（静的）です。
children: 要素の直下の子要素のみをHTMLCollectionとして返します。ライブで、DOMの変更を反映します。
length: HTMLCollectionやNodeListの要素数を表すプロパティです。
item: HTMLCollectionやNodeListの指定インデックスの要素を取得するメソッドです。
namedItem: HTMLCollectionの名前付きアイテムを取得するメソッド。name属性やid属性で検索できます。
Element: HTMLCollectionの各要素はHTMLElement（またはElement）です。要素ノードの基本単位です。
Document: HTMLCollectionを取得する起点となるオブジェクトで、通常はdocumentオブジェクトから呼び出します。
ライブコレクション: HTMLCollectionはライブコレクションで、DOMの変更に追従します。
静的コレクション: NodeList（特にquerySelectorAllの返却値）は静的コレクションで、作成時点の状態を保持します。
Array.from: HTMLCollectionやNodeListを通常の配列へ変換するための便利なメソッドです。

htmlcollectionの関連用語

HTMLCollection: HTMLCollectionは、複数のHTML要素を格納する配列風のライブコレクションです。document.getElementsByTagNameやdocument.getElementsByClassNameが返します。長さはlengthで、要素はitem(index)で取得できます。name属性やid属性で取得するnamedItem(name)も使え、DOMの変更に追従して自動更新されます。
NodeList: NodeListはノードの集合を表す配列風のコレクションです。querySelectorAllが返すNodeListは静的(static)で、lengthとitem(index)でアクセスします。for...ofで反復でき、Array.fromで配列へ変換できます。
Element: ElementはHTMLの要素ノードを表します。divやspanなどが該当します。HTMLCollectionに含まれるのは多くがElementです。
Node: NodeはDOMの基本単位で、ElementのほかにTextやCommentなどを含む総称です。
Document: DocumentはHTML文書を表すオブジェクトで、DOMツリーの根元となり、要素コレクションを取得する入口です。
DOM: Document Object Modelの略。HTMLをオブジェクトとして操作するAPIの総称です。
Live collection: ライブコレクションはDOMの変更に応じて内容が自動的に更新されるコレクションで、HTMLCollectionはこの性質を持つことが多いです。
Static collection: 静的コレクションは取得時の状態を固定し、その後のDOM変更を反映しません。querySelectorAllが返すNodeListは静的です。
getElementsByTagName: タグ名を指定して、該当要素のHTMLCollectionを返します。ライブでDOMの変更を追従します。
getElementsByClassName: クラス名を指定して、該当要素のHTMLCollectionを返します。ライブで更新されます。
getElementById: ID属性が一致する単一のElementを返します（HTMLCollectionではなくElementを返します）。
querySelector: CSSセレクタに一致する最初の要素を返します。該当なしの場合はnullです。
querySelectorAll: CSSセレクタに一致する全要素を静的なNodeListとして返します。
children: 要素ノードの子要素だけをHTMLCollectionとして返します。テキストノードは含まれません。
forms: 文書内のform要素をHTMLCollectionとして返します。
form.elements: フォーム内のすべてのコントロール要素（input, select, textarea など）をHTMLCollectionとして返します。
namedItem: HTMLCollectionのname属性やid属性で要素を取得するメソッドです。
item: HTMLCollectionやNodeListの指定インデックスの要素を返します。0から始まる番号でアクセスします。
length: コレクションの要素数を表すプロパティです。
Array.from: HTMLCollectionやNodeListを実際のArrayに変換して、Arrayのメソッドを使えるようにします。
for...of: HTMLCollectionやNodeListはfor...ofで反復できます。互換性の都合で古い環境では配列へ変換してから使うと確実です。