【JavaScript】子要素を取得・操作する方法｜children・childNodes・firstElementChild・追加・削除・置換まで解説

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

// children: 要素ノードのみ（li だけ）
console.log(list.children.length);    // 3
console.log(list.children[0].tagName); // "LI"

// childNodes: テキストノード（改行・空白）も含む
console.log(list.childNodes.length);   // 7（テキスト + li + テキスト + li + ...）
console.log(list.childNodes[0].nodeType); // 3（Text ノード = 改行・空白）

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

// 最初の子要素
console.log(list.firstElementChild.textContent); // "Item 1"

// 最後の子要素
console.log(list.lastElementChild.textContent);  // "Item 3"

// N 番目の子要素（0 始まり）
console.log(list.children[1].textContent);        // "Item 2"

// 子要素の数
console.log(list.children.length);                 // 3
console.log(list.childElementCount);                // 3（同じ結果）

// 親要素
const item = list.children[0];
console.log(item.parentElement.id);                 // "list"

// 兄弟要素
console.log(item.nextElementSibling.textContent);   // "Item 2"
console.log(list.children[1].previousElementSibling.textContent); // "Item 1"

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

// 末尾に追加
const newItem = document.createElement("li");
newItem.textContent = "Item 4";
list.append(newItem);

// 先頭に追加
const firstItem = document.createElement("li");
firstItem.textContent = "Item 0";
list.prepend(firstItem);

// 文字列も直接追加可能
list.append("テキストノード"); // テキストノードとして追加

// 複数要素を同時に追加
const li1 = document.createElement("li");
li1.textContent = "A";
const li2 = document.createElement("li");
li2.textContent = "B";
list.append(li1, li2); // 2 つ同時に末尾に追加

const secondItem = list.children[1];

// secondItem の前に挿入
const newBefore = document.createElement("li");
newBefore.textContent = "Before 2";
secondItem.before(newBefore);

// secondItem の後に挿入
const newAfter = document.createElement("li");
newAfter.textContent = "After 2";
secondItem.after(newAfter);

// 指定した子要素の前に挿入（従来の API）
const newItem = document.createElement("li");
newItem.textContent = "Inserted";
list.insertBefore(newItem, list.children[1]); // 2 番目の前に挿入

// 第 2 引数が null なら末尾に追加（= appendChild と同じ）
list.insertBefore(newItem, null);

// remove(): 要素自身を削除（推奨）
list.children[1].remove(); // 2 番目の子要素を削除

// removeChild(): 親から子を削除（従来）
list.removeChild(list.children[0]); // 最初の子要素を削除

// 全子要素を削除
while (list.firstChild) {
  list.firstChild.remove();
}

// innerHTML で全削除（最もシンプルだが注意点あり）
list.innerHTML = "";

// replaceChildren() で全削除（推奨: イベントリスナーもクリーンに解除）
list.replaceChildren();

// replaceWith(): 要素自身を別の要素に置換（推奨）
const oldItem = list.children[0];
const newItem = document.createElement("li");
newItem.textContent = "Replaced!";
oldItem.replaceWith(newItem);

// replaceChild(): 親が子を置換（従来）
list.replaceChild(newItem, list.children[0]);

// replaceChildren(): 全子要素を置換
const li1 = document.createElement("li");
li1.textContent = "New 1";
const li2 = document.createElement("li");
li2.textContent = "New 2";
list.replaceChildren(li1, li2); // 既存の子を全削除して li1, li2 に置換

// 基本: createElement + プロパティ設定 + append
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
  <h3>${title}</h3>
  <p>${description}</p>
`;
document.querySelector(".container").append(card);

// template リテラルで HTML を直接挿入（簡潔だが XSS に注意）
document.querySelector(".container").insertAdjacentHTML(
  "beforeend",
  `<div class="card"><h3>${title}</h3><p>${description}</p></div>`
);

const fruits = ["Apple", "Banana", "Cherry"];
const ul = document.querySelector("#fruit-list");

fruits.forEach(fruit => {
  const li = document.createElement("li");
  li.textContent = fruit;
  ul.append(li);
});

const container = document.querySelector(".container");

// children で全子要素をループ
for (const child of container.children) {
  child.classList.add("processed");
}

// 配列に変換して filter
const divChildren = [...container.children].filter(c => c.tagName === "DIV");

// テキスト順で並べ替え
const list = document.querySelector("#list");
const sorted = [...list.children].sort((a, b) =>
  a.textContent.localeCompare(b.textContent)
);
list.replaceChildren(...sorted);

// 子要素がなければメッセージを表示
const list = document.querySelector("#todo-list");
if (list.children.length === 0) {
  const msg = document.createElement("p");
  msg.textContent = "タスクがありません";
  msg.className = "empty-message";
  list.append(msg);
}

function addTodo(text) {
  const li = document.createElement("li");
  li.textContent = text;

  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "削除";
  deleteBtn.addEventListener("click", () => li.remove());

  li.append(deleteBtn);
  document.querySelector("#todo-list").append(li);
}