このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】要素を移動するには

要素を移動するには

　DOM ツリーを自在に歩けるようになると、「今どの要素を操作しているか」 を意識せずに柔軟なスクリプトを書けるようになります。
　ここでは parentNode や childNodes など ノード間を移動するプロパティ を体系的に整理し、実際にツリーをたどって要素をハイライトするデモを作ります。改行や空白によって生成される テキストノード が思わぬ落とし穴になる点にも注目しましょう。

１．ツリーを上方向にたどる

1.1. 親ノードと親要素

プロパティ戻り値特徴
parentNode直近の親ノード<html> を越えると Document → さらに上は null
parentElement直近の親 Element親が Element 以外なら null

1.2. 利用例

let el = document.querySelector('#task');
while (el){                     // Document までループ
  console.log(el.nodeName);
  el = el.parentNode;
}

２．下方向・横方向にたどる

2.1. 子ノード関連

プロパティ説明
childNodes直下のノードを NodeList で取得（テキストノードを含む）
firstChild / lastChild先頭 / 末尾の子ノード

2.2. 兄弟ノード

プロパティ説明
previousSibling直前の兄弟ノード
nextSibling直後の兄弟ノード

注意
タグ間に改行や空白があると テキストノード が挿入され、兄弟関係の判定がずれることがあります。

３．ノード型を調べる

ノード識別プロパティ

プロパティ意味例
nodeNameノード名 (DIV, #text など)デバッグ向け
nodeType型番号 (1:要素, 3:テキスト…)
ELEMENT_NODE は 1、TEXT_NODE は 3、COMMENT_NODE は 7 など。		条件分岐に便利

４．デモ：ツリーを歩いて TODO を強調

ファイル名： node_traversal_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を移動するには</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
.highlight{background:#ffe66d;}
</style>
</head>
<body>
<h2>📋 今日やること</h2>

<ul id="todo">
  <li id="t1">メールチェック</li>
  <li id="t2">デザインレビュー</li>
  <li id="t3">テストコードを書く</li>
</ul>

<button id="up">親へ</button>
<button id="down">最初の子へ</button>
<button id="next">次の兄弟へ</button>

<pre id="info"></pre>

<script>
/* ---------- 初期状態：2 件目を選択 ---------- */
let current = document.getElementById('t2');
paint();

/* --- 1. 親へ移動 --- */
document.getElementById('up').onclick = () => {
  if (current.parentElement){
    current = current.parentElement;
    paint();
  }
};

/* --- 2. 最初の子へ移動 --- */
document.getElementById('down').onclick = () => {
  if (current.firstChild){
    current = current.firstChild;
    paint();
  }
};

/* --- 3. 次の兄弟へ移動 --- */
document.getElementById('next').onclick = () => {
  if (current.nextSibling){
    current = current.nextSibling;
    paint();
  }
};

/* ---------- 画面を更新 ---------- */
function paint(){
  /* 既存ハイライトを解除 */
  document.querySelectorAll('.highlight') //el は "element"（要素）の略です。
          .forEach(el => el.classList.remove('highlight'));

  /* 要素ノードだけハイライト */
  if (current.nodeType === Node.ELEMENT_NODE){
    current.classList.add('highlight');
  }

  /* 情報を表示 */
  const info = `
nodeName : ${current.nodeName}
nodeType : ${current.nodeType}
parent   : ${current.parentNode?.nodeName ?? '(なし)'}
firstChild: ${current.firstChild?.nodeName ?? '(なし)'}
nextSibling: ${current.nextSibling?.nodeName ?? '(なし)'}
  `;
  document.getElementById('info').textContent = info.trim();
}
</script>
</body>
</html>

使い方

  1. ページを開くと「デザインレビュー」が黄色くハイライト。
  2. [親へ] を押すと <ul> に移動しリスト全体がハイライト。
  3. [最初の子へ] でテキストノード（改行）が選ばれる → nodeType が 3 と確認。
  4. [次の兄弟へ] を数回押して別の <li> へ移動。

ブラウザの出力例

学べるポイント

  • parentElement と parentNode の違い
  • 改行テキストが子・兄弟ノードとして出現する挙動
  • nodeType を利用した要素ノード判定

まとめ

  • 親方向： parentNode / parentElement
  • 子方向： childNodes / firstChild / lastChild
  • 兄弟方向： previousSibling / nextSibling
  • ノード判定： nodeName と nodeType

　これらを組み合わせれば、どんな DOM 構造でも自在にナビゲートできます。イベントハンドラ内で動的に位置を移動し、複雑な UI 挙動を組み立ててみましょう。