23 November 2025

DOMツリーの移動（親・子・兄弟へのアクセス）

by Natsumi Chiba

このページでは、DOM の「親子関係」や「兄弟関係」をたどるメソッドをまとめます。

HTML はツリー構造になっており、 JavaScript ではこの構造をたどりながら要素を取得・操作できます。

■ parentElement（親要素を取得）

【どんなときに使う？】・ボタンの親コンテナを操作したいとき・クリックされた要素の一つ上の要素をたどりたいとき

【何ができる？】・親をたどってスタイルを変える・親要素の情報を取得する

【書き方】element.parentElement

const child = document.querySelector(".child");
const parent = child.parentElement;

parent.style.backgroundColor = "lightgray";

■ children（子要素をすべて取得）

【どんなときに使う？】・親要素の中にある子を順番に処理したいとき・リストやカードをまとめて操作したいとき

【何ができる？】・子をループして処理する・スタイル変更など

【書き方】親要素.children

const parent = document.querySelector(".parent");
const kids = parent.children;

for (let i = 0; i < kids.length; i++) {
  kids[i].style.color = "red";
}

■ firstElementChild（最初の子要素を取得）

【どんなときに使う？】・リストの一番上だけを操作したいとき・最初のカードだけ色を変えたいとき

【書き方】親要素.firstElementChild

const ul = document.getElementById("list");
const first = ul.firstElementChild;

first.style.fontWeight = "bold";

■ lastElementChild（最後の子要素を取得）

【どんなときに使う？】・リストの最後の項目を操作したい・最後のカードだけ目立たせたい

【書き方】親要素.lastElementChild

const ul = document.getElementById("list");
const last = ul.lastElementChild;

last.style.color = "blue";

■ nextElementSibling（次の兄弟要素）

【どんなときに使う？】・ある要素の直後にある要素を操作したい・「次へ」的な関係をたどりたいとき

【書き方】

const first = document.getElementById("firstDiv");
const next = first.nextElementSibling;

next.style.backgroundColor = "yellow";

■ previousElementSibling（前の兄弟要素）

【どんなときに使う？】・ある要素の「ひとつ前」を操作したいとき

【書き方】

const second = document.getElementById("secondDiv");
const prev = second.previousElementSibling;

prev.style.backgroundColor = "lightgreen";

■ createElement（新しい要素を作る）

【どんなときに使う？】・JavaScript で新しいタグを作りたいとき

【書き方】

const newP = document.createElement("p");
newP.textContent = "新しく作った段落です";

■ appendChild（作った要素を追加する）

【どんなときに使う？】・新しい要素を実際に画面へ追加したいとき

【書き方】

const parent = document.getElementById("container");
parent.appendChild(newP);

■ textContent（テキストの取得・変更）

【どんなときに使う？】・要素の中の文字だけを読みたい・変えたいとき

【書き方】

const p = document.getElementById("message");
p.textContent = "書き換えました";

■ querySelector / querySelectorAll（CSS セレクタで取得）

【ポイント】・CSS と同じ書き方で DOM を検索するだけ（CSS の適用は参照しない）

【例】

document.querySelector(".box");
document.querySelectorAll("ul li");

tags:

Study Log

日々の学習のまとめ・備忘録

DOMツリーの移動（親・子・兄弟へのアクセス）