【JavaScript】兄弟要素を取得する方法｜nextElementSibling・previousElementSibling・全兄弟の取得・実務パターンまで解説

<ul>
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
  <li id="item4">Item 4</li>
</ul>

const item2 = document.getElementById("item2");

// 次の兄弟要素
console.log(item2.nextElementSibling.textContent); // "Item 3"

// 前の兄弟要素
console.log(item2.previousElementSibling.textContent); // "Item 1"

// 最後の要素の次 → null
const item4 = document.getElementById("item4");
console.log(item4.nextElementSibling); // null（次がない）

// 最初の要素の前 → null
const item1 = document.getElementById("item1");
console.log(item1.previousElementSibling); // null（前がない）

const item2 = document.getElementById("item2");

// nextElementSibling: 要素ノードのみ（推奨）
console.log(item2.nextElementSibling);      // <li id="item3">Item 3</li>

// nextSibling: テキストノード（改行 + スペース）も含む
console.log(item2.nextSibling);              // #text（改行）
console.log(item2.nextSibling.nextSibling);  // <li id="item3">Item 3</li>

// 方法(1): 親の children から自分を除外
function getSiblings(el) {
  return [...el.parentElement.children].filter(child => child !== el);
}

const item2 = document.getElementById("item2");
const siblings = getSiblings(item2);
console.log(siblings.length); // 3（item1, item3, item4）

// 方法(2): 後続の兄弟だけ取得
function getNextSiblings(el) {
  const siblings = [];
  let next = el.nextElementSibling;
  while (next) {
    siblings.push(next);
    next = next.nextElementSibling;
  }
  return siblings;
}

// 方法(3): 前方の兄弟だけ取得
function getPrevSiblings(el) {
  const siblings = [];
  let prev = el.previousElementSibling;
  while (prev) {
    siblings.push(prev);
    prev = prev.previousElementSibling;
  }
  return siblings;
}

// N 個先の兄弟要素を取得
function getNthSibling(el, n) {
  let current = el;
  for (let i = 0; i < Math.abs(n); i++) {
    if (!current) return null;
    current = n > 0
      ? current.nextElementSibling
      : current.previousElementSibling;
  }
  return current;
}

const item1 = document.getElementById("item1");
console.log(getNthSibling(item1, 2)?.textContent);  // "Item 3"（2 個先）
console.log(getNthSibling(item1, -1));                // null（前がない）

// <button class="accordion-header">タイトル</button>
// <div class="accordion-body">内容</div>

document.querySelectorAll(".accordion-header").forEach(header => {
  header.addEventListener("click", () => {
    // 次の兄弟要素（= accordion-body）を開閉
    const body = header.nextElementSibling;
    body.hidden = !body.hidden;
  });
});

document.querySelector("table").addEventListener("click", (e) => {
  const row = e.target.closest("tr");
  if (!row) return;

  // 全行のハイライトを解除
  document.querySelectorAll("tr.highlight").forEach(r => r.classList.remove("highlight"));

  // クリックした行と前後の行をハイライト
  row.classList.add("highlight");
  row.previousElementSibling?.classList.add("highlight");
  row.nextElementSibling?.classList.add("highlight");
});

let current = document.querySelector(".slide.active");

document.querySelector("#next").addEventListener("click", () => {
  const next = current.nextElementSibling;
  if (next) {
    current.classList.remove("active");
    next.classList.add("active");
    current = next;
  }
});

document.querySelector("#prev").addEventListener("click", () => {
  const prev = current.previousElementSibling;
  if (prev) {
    current.classList.remove("active");
    prev.classList.add("active");
    current = prev;
  }
});

// <dl>
//   <dt>用語 1</dt>
//   <dd>説明 1</dd>
//   <dt>用語 2</dt>
//   <dd>説明 2</dd>
// </dl>

document.querySelectorAll("dt").forEach(dt => {
  dt.addEventListener("click", () => {
    const dd = dt.nextElementSibling; // 次の dd
    if (dd && dd.tagName === "DD") {
      dd.hidden = !dd.hidden;
    }
  });
});

// タブボタンのクリック
document.querySelectorAll(".tab-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    // 全兄弟から active を解除
    [...btn.parentElement.children].forEach(sibling => {
      sibling.classList.remove("active");
    });
    // 自分だけに active を付与
    btn.classList.add("active");
  });
});