HTMLCollection

エイチティーエムエルコレクション（DOM操作）

意味 HTML要素の集合

HTMLCollectionとは？

HTMLCollectionはHTML要素のコレクションを表すオブジェクトで、`document.getElementsByClassName`などのメソッドの結果として返されます。

HTMLCollectionの具体的な使い方

HTMLCollectionを使用して要素のテキストを取得する例

<button onclick='showHTMLCollectionItems()'>HTMLCollectionの使用例</button>
<div id='container'>
  <div class='item'>アイテム1</div>
  <div class='item'>アイテム2</div>
  <div class='item'>アイテム3</div>
</div>

<script>
function showHTMLCollectionItems() {
  let container = document.getElementById('container');
  let items = container.getElementsByClassName('item');
  let itemTexts = [];
  
  for (let i = 0; i < items.length; i++) {
    itemTexts.push(items[i].textContent);
  }
  
  alert('コンテナ内のアイテムのテキスト: ' + itemTexts.join(', '));
  console.log('HTMLCollectionの長さ:', items.length);
  console.log('最初のアイテムのテキスト:', items[0].textContent);
}
</script>

コンテナ内の'item'クラスを持つ全要素をHTMLCollectionとして取得し、それぞれのテキスト内容を配列に保存します。その後、配列の内容をアラートで表示し、コンソールにHTMLCollectionの長さと最初のアイテムのテキストを出力します。

HTMLCollectionに関するよくある質問

Q. HTMLCollectionとは何ですか？

A. HTMLCollectionは、HTML要素の集合を表すオブジェクトです。主にgetElementsByClassName()やgetElementsByTagName()などのメソッドの結果として返されます。

Q. HTMLCollectionは配列ですか？

A. HTMLCollectionは配列のように見えますが、実際には配列ではありません。配列に似た動的なオブジェクトで、要素にインデックスでアクセスできますが、forEach()などの配列メソッドは使用できません。

Q. HTMLCollectionを配列に変換できますか？

A. はい、Array.from()メソッドを使用してHTMLCollectionを配列に変換できます。例：Array.from(document.getElementsByClassName('item'))。これにより、配列のメソッドを使用できるようになります。

HTMLCollectionが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのHTMLCollectionやgetElementsByClassName()、setAttribute()、getElementById()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。