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 < 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 が役立ちます。
