【JavaScript】n番目以外の子要素を取得する方法｜filter・:not(:nth-child)・children・複数除外・実務パターンまで解説

<ul id="list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
  <li>アイテム 4</li>
  <li>アイテム 5</li>
</ul>

const list = document.getElementById("list");
const n = 2; // 除外したいインデックス（0始まり → 3番目の要素）

// children を配列に変換してフィルタリング
const filtered = Array.from(list.children).filter((_, index) => index !== n);

console.log(filtered.length); // 4（5要素中1つ除外）
filtered.forEach(el => console.log(el.textContent));
// "アイテム 1", "アイテム 2", "アイテム 4", "アイテム 5"

const filtered = [...list.children].filter((_, i) => i !== n);

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

// 3番目（:nth-childは1始まり）以外の子要素を取得
const filtered = list.querySelectorAll(":scope > li:not(:nth-child(3))");

filtered.forEach(el => console.log(el.textContent));
// "アイテム 1", "アイテム 2", "アイテム 4", "アイテム 5"

// 先頭の li 以外を取得
const withoutFirst = list.querySelectorAll(":scope > li:not(:first-child)");

// 末尾の li 以外を取得
const withoutLast = list.querySelectorAll(":scope > li:not(:last-child)");

const list = document.getElementById("list");
const n = 2;

for (let i = 0; i < list.children.length; i++) {
  if (i === n) continue; // n番目をスキップ
  console.log(list.children[i].textContent);
}

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

// 除外したいインデックスのセット
const excludeIndexes = new Set([0, 2, 4]);

const filtered = [...list.children].filter((_, i) => !excludeIndexes.has(i));

filtered.forEach(el => console.log(el.textContent));
// "アイテム 2", "アイテム 4"

// .active クラスを持つ要素以外を取得
const inactive = [...list.children].filter(el => !el.classList.contains("active"));

// CSS セレクタでも可能
const inactive2 = list.querySelectorAll(":scope > li:not(.active)");

const targetEl = list.children[2]; // 除外したい要素の参照

const others = [...list.children].filter(el => el !== targetEl);

<div id="mixed">
  <h2>見出し</h2>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>

// :nth-child(2) → 2番目の子要素 = <p>段落1</p>
document.querySelector("#mixed :nth-child(2)");

// :nth-of-type(2) → 2番目の <p> = <p>段落2</p>
document.querySelector("#mixed p:nth-of-type(2)");

const table = document.getElementById("myTable");

// tbody の全行を取得（ヘッダーは thead にあるため自然に除外）
const dataRows = table.querySelectorAll("tbody tr");

// thead がなく tr が直接並んでいる場合: 先頭以外を取得
const rows = [...table.querySelectorAll("tr")].filter((_, i) => i !== 0);

// CSS セレクタ版
const rows2 = table.querySelectorAll("tr:not(:first-child)");

function switchTab(selectedIndex) {
  const panels = document.querySelectorAll(".tab-panel");

  panels.forEach((panel, i) => {
    if (i === selectedIndex) {
      panel.style.display = "block";
    } else {
      panel.style.display = "none";
    }
  });
}

switchTab(0); // 最初のパネルだけ表示

const items = document.querySelectorAll(".nav-item");

items.forEach(item => {
  item.addEventListener("click", () => {
    // 全アイテムから active を削除
    items.forEach(el => el.classList.remove("active"));
    // クリックされたアイテムだけ active を付与
    item.classList.add("active");
  });
});

let draggedItem = null;

document.querySelectorAll(".sortable-item").forEach(item => {
  item.addEventListener("dragstart", () => { draggedItem = item; });

  item.addEventListener("dragover", (e) => {
    e.preventDefault();
    // 自分以外のアイテムにドロップ先スタイルを適用
    if (item !== draggedItem) {
      item.classList.add("drop-target");
    }
  });

  item.addEventListener("dragleave", () => {
    item.classList.remove("drop-target");
  });
});