getElementsByClassName と getElementsByTagName

getElementsByClassName と getElementsByTagName は、クラス名やタグ名で複数の要素を取得する古くからあるメソッドです。querySelectorAll が登場してからは使用頻度が減りましたが、今でも現役で使われています。

getElementsByClassName

クラス名で要素を取得します。

const items = document.getElementsByClassName('item');
console.log(items.length);

クラス名はドット（.）なしで指定します。複数のクラスを持つ要素を探すときは、スペースで区切ります。

// class="box red" を持つ要素を取得
const redBoxes = document.getElementsByClassName('box red');

getElementsByTagName

タグ名で要素を取得します。

const paragraphs = document.getElementsByTagName('p');
const divs = document.getElementsByTagName('div');

すべての要素を取得したいときは、* を使います。

const allElements = document.getElementsByTagName('*');

HTMLCollection という戻り値

これらのメソッドは NodeList ではなく HTMLCollection を返します。HTMLCollection は「ライブ」なコレクションで、DOM が変更されると自動的に更新されます。

const items = document.getElementsByClassName('item');
console.log(items.length); // 3

// 新しい要素を追加すると…
const newItem = document.createElement('div');
newItem.className = 'item';
document.body.appendChild(newItem);

console.log(items.length); // 4（自動的に更新される！）

querySelectorAll との違い

getElementsByClassName / getElementsByTagName

HTMLCollection を返す。ライブで DOM の変更が反映される。forEach が使えない

querySelectorAll

NodeList を返す。静的で取得時点のスナップショット。forEach が使える

HTMLCollection をループする方法

HTMLCollection には forEach がないので、いくつかの方法があります。

const items = document.getElementsByClassName('item');

// 方法1: for文
for (let i = 0; i &lt; items.length; i++) {
  console.log(items[i].textContent);
}

// 方法2: Array.from で配列に変換
Array.from(items).forEach(item => {
  console.log(item.textContent);
});

// 方法3: スプレッド構文
[...items].forEach(item => {
  console.log(item.textContent);
});

いつ使うか

基本的には querySelector / querySelectorAll で十分ですが、ライブコレクションが必要なときや、パフォーマンスを極限まで追求したいときには getElementsByClassName / getElementsByTagName が役立ちます。