getElementsByTagName()

ゲットエレメントバイタグネーム（DOM操作）

意味タグ名で要素群を取得

getElementsByTagName()とは？

getElementsByTagNameメソッドは、指定したタグ名を持つすべての要素をドキュメントから取得します。

getElementsByTagName()の具体的な使い方

getElementsByTagNameを使用して要素を取得し操作する例

const colors = ['lightblue', 'lightgreen', 'lightpink', 'lightyellow'];
let currentColorIndex = 0;

function changeListItemColors() {
  const listItems = document.getElementsByTagName('li');
  for (let i = 0; i < listItems.length; i++) {
    listItems[i].style.backgroundColor = colors[currentColorIndex];
  }
  currentColorIndex = (currentColorIndex + 1) % colors.length;
}

console.log('リストアイテムの数:', document.getElementsByTagName('li').length);

👇出力結果

リストアイテムの数: 3

この例では、getElementsByTagNameを使用して全ての<li>要素を取得し、それらの背景色を一度に変更します。また、コンソールにリストアイテムの数を表示します。

getElementsByTagName()に関するよくある質問

Q. 返される値の型は何ですか？

A. getElementsByTagNameは、HTMLCollectionオブジェクトを返します。これは配列のようなオブジェクトですが、実際の配列ではありません。そのため、配列のメソッドを使用するには、Array.from()などで配列に変換する必要があります。

Q. 動的に更新されますか？

A. はい、getElementsByTagNameが返すHTMLCollectionは「ライブ」で、DOM内の変更を自動的に反映します。これは便利ですが、ループ内で要素を追加または削除する際には注意が必要です。

Q. パフォーマンスへの影響は？

A. getElementsByTagNameは高速ですが、大規模なDOMでは遅くなる可能性があります。特定の要素を探す場合は、より具体的なquerySelectorやgetElementByIdの方が効率的かもしれません。

getElementsByTagName()が学べる書籍の紹介

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

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