【JavaScript】タグ名で要素を取得する方法｜getElementsByTagName・querySelectorAll・ライブコレクション・実務パターンまで解説

// 全ての p 要素を取得
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // p 要素の数
console.log(paragraphs[0]);     // 最初の p 要素

// 全ての img 要素を取得
const images = document.getElementsByTagName("img");

// 全ての a 要素を取得
const links = document.getElementsByTagName("a");

// 全要素を取得（ワイルドカード *）
const allElements = document.getElementsByTagName("*");
console.log(allElements.length); // ページ内の全要素数

// getElementsByTagName と同等
const paragraphs = document.querySelectorAll("p");

// querySelectorAll はさらに複合条件が可能
const mainParagraphs = document.querySelectorAll("main p");
const firstP = document.querySelectorAll("p:first-child");
const boldLinks = document.querySelectorAll("a.bold");

// getElementsByTagName はライブ
const items = document.getElementsByTagName("li");
console.log(items.length); // 3

// DOM に li を追加
const newLi = document.createElement("li");
newLi.textContent = "New Item";
document.querySelector("ul").appendChild(newLi);

// items の length が自動更新される!
console.log(items.length); // 4（再取得不要）

// querySelectorAll は静的（更新されない）
const staticItems = document.querySelectorAll("li");
// DOM に追加しても staticItems.length は 3 のまま

// NG: ループ中に要素を削除するとスキップが発生
// const items = document.getElementsByTagName("li");
// for (let i = 0; i < items.length; i++) {
//   items[i].remove(); // length が変わりスキップ!
// }

// OK(1): 逆順ループ
const items = document.getElementsByTagName("li");
for (let i = items.length - 1; i >= 0; i--) {
  items[i].remove(); // 逆順なら安全
}

// OK(2): querySelectorAll（静的）を使う
document.querySelectorAll("li").forEach(li => li.remove());

// 特定の親要素内のタグだけ取得
const nav = document.querySelector("nav");
const navLinks = nav.getElementsByTagName("a");
console.log(navLinks.length); // nav 内の a 要素だけ

// querySelectorAll でも同等
const navLinks2 = nav.querySelectorAll("a");

// テーブル内の td だけ取得
const table = document.querySelector("#data-table");
const cells = table.getElementsByTagName("td");

// 全画像
console.log(document.images.length);

// 全フォーム
console.log(document.forms.length);
console.log(document.forms[0].action); // 最初のフォームの action

// テーブルの全行
const table = document.querySelector("#data-table");
console.log(table.rows.length); // 行数
console.log(table.rows[0].cells.length); // 最初の行のセル数

document.querySelectorAll("img").forEach(img => {
  if (!img.hasAttribute("loading")) {
    img.setAttribute("loading", "lazy");
  }
});

// テーブルの偶数行にクラスを付与
const rows = document.querySelector("#data-table").rows;
for (let i = 0; i < rows.length; i++) {
  if (i % 2 === 1) rows[i].classList.add("even-row");
}

// CSS だけでも可能: tr:nth-child(even) { background: #f8f8f8; }

[...document.links].forEach(link => {
  if (link.hostname !== location.hostname) {
    link.setAttribute("rel", "noopener noreferrer");
    link.setAttribute("target", "_blank");
  }
});

// ページ内の要素数を集計（デバッグ用）
const tags = ["div", "p", "span", "a", "img", "table"];
tags.forEach(tag => {
  const count = document.getElementsByTagName(tag).length;
  if (count > 0) console.log(`<${tag}>: ${count} 個`);
});

// ワイルドカード * で全要素を取得
const total = document.getElementsByTagName("*").length;
console.log(`ページ内の全要素数: ${total}`);