Terms Privacy

© Rollpie

JavaScript
19 Jan 2026

nextSibling と previousSibling

nextSibling と previousSibling は、兄弟ノードを取得するプロパティです。同様に nextElementSibling と previousElementSibling もあります。

4つのプロパティ

プロパティ取得対象
nextSibling次の兄弟ノード（テキスト含む）
previousSibling前の兄弟ノード（テキスト含む）
nextElementSibling次の兄弟要素（Element のみ）
previousElementSibling前の兄弟要素（Element のみ）

使い方

<ul>
  <li id="item1">項目1</li>
  <li id="item2">項目2</li>
  <li id="item3">項目3</li>
</ul>
const item2 = document.getElementById('item2');

// nextSibling はテキストノード（改行）かもしれない
console.log(item2.nextSibling); // #text

// nextElementSibling は確実に Element
console.log(item2.nextElementSibling); // <li id="item3">

// previousElementSibling も同様
console.log(item2.previousElementSibling); // <li id="item1">

兄弟がいない場合

先頭や末尾の要素で、それ以上兄弟がない場合は null を返します。

const item1 = document.getElementById('item1');
console.log(item1.previousElementSibling); // null（前に兄弟がいない）

const item3 = document.getElementById('item3');
console.log(item3.nextElementSibling); // null（次に兄弟がいない）

実際に動かしてみよう

リスト項目を上下に移動させます。

HTML
CSS
JavaScript
<ul id="list">
  <li>項目A</li>
  <li class="selected">項目B（選択中）</li>
  <li>項目C</li>
  <li>項目D</li>
</ul>
<button id="upBtn">↑ 上へ</button>
<button id="downBtn">↓ 下へ</button>
#list li { padding: 8px; }
.selected { background: #4caf50; color: white; }
document.getElementById('upBtn').addEventListener('click', () => {
  const selected = document.querySelector('.selected');
  const prev = selected.previousElementSibling;
  if (prev) {
    selected.parentElement.insertBefore(selected, prev);
  }
});

document.getElementById('downBtn').addEventListener('click', () => {
  const selected = document.querySelector('.selected');
  const next = selected.nextElementSibling;
  if (next) {
    selected.parentElement.insertBefore(next, selected);
  }
});

すべての兄弟をループする

const start = document.getElementById('item1');

// 後ろの兄弟をすべて取得
let current = start;
while (current.nextElementSibling) {
  current = current.nextElementSibling;
  console.log(current.textContent);
}

どれを使うべきか

nextSibling / previousSibling

テキストノードも含む。通常は使わない

nextElementSibling / previousElementSibling

Element だけを返す。こちらを使う

通常は nextElementSibling / previousElementSibling を使いましょう。テキストノードが返ってきて困ることがありません。

6 views