JavaScriptでHTMLの要素を取得する際、同じタグ名を持つ要素をまとめて取得したい場合があります。そんなときに便利なのが`getElementsByTagName()`メソッドです。この記事では、`getElementsByTagName()`の基本的な使い方から実践的な例まで解説します。

getElementsByTagName()の基本構文

document.getElementsByTagName("タグ名")

このメソッドは指定したタグ名を持つ要素をすべて取得し、HTMLCollectionオブジェクトとして返します。

基本的な使用例

例1：すべてのpタグを取得

const paragraphs = document.getElementsByTagName("p");
// すべてのp要素が取得できます

例2：取得した要素の操作

const divElements = document.getElementsByTagName("div");
for (let i = 0; i < divElements.length; i++) {
    divElements[i].style.backgroundColor = "yellow";
}

よくある使用シーン

1. 特定のタグの内容を変更

const headings = document.getElementsByTagName("h2");
for (let heading of headings) {
    heading.style.color = "blue";
}

2. 画像要素の一括処理

const images = document.getElementsByTagName("img");
for (let image of images) {
    image.alt = "画像の説明";
}

注意点

1. HTMLCollectionは配列ではありません

2. 返値は動的に更新されます

3. IE8以下では一部の動作が異なる場合があります

より効率的な使用方法

特定の親要素の中からタグを検索する場合：

const parentDiv = document.getElementById("parent");
const childParagraphs = parentDiv.getElementsByTagName("p");

まとめ

`getElementsByTagName()`は：

  • 同じタグ名を持つ要素をまとめて取得できる
  • HTMLCollectionを返す
  • 動的に更新される
  • 親要素を指定して検索範囲を絞ることができる

実際のプロジェクトでは、より現代的な`querySelector()`や`querySelectorAll()`と組み合わせて使用することで、より柔軟なDOM操作が可能になります。

コードの保守性を考慮する場合は、可能な限り具体的なセレクタを使用することをお勧めします。