【JavaScript】element.previousSibling と element.nextSibling の解説
JavaScript: element.previousSibling と element.nextSibling の解説
element.previousSibling の概要と使い方
element.previousSibling は、現在の要素の直前にある「兄弟ノード」を取得します。このプロパティは、DOMツリー内でノードの位置関係を確認したり操作したりする際に使用されます。
ポイント:
- 「兄弟ノード」は、同じ親ノードを共有するノードのことを指します。
- 取得されるのは「全てのノード（テキストノードやコメントも含む）」です。
- 兄弟ノードが存在しない場合、
nullを返します。
例:
// HTML構造
<div id="container">
<p>最初の段落</p>
<!-- コメント -->
<p id="second">2番目の段落</p>
</div>
// JavaScript
const secondParagraph = document.getElementById('second');
console.log(secondParagraph.previousSibling); // コメントノード
console.log(secondParagraph.previousSibling.nodeType); // 8（コメントノード）
console.log(secondParagraph.previousSibling.textContent); // " コメント "
element.nextSibling の概要と使い方
element.nextSibling は、現在の要素の直後にある「兄弟ノード」を取得します。基本的な動作や特徴は previousSibling と似ていますが、取得するのは直後のノードです。
ポイント:
- 直後のノードがテキストノードやコメントノードであっても取得されます。
- 直後にノードが存在しない場合、
nullを返します。
例:
// HTML構造
<ul id="list">
<li>アイテム1</li>
<!-- コメント -->
<li>アイテム2</li>
</ul>
// JavaScript
const firstItem = document.querySelector('#list li:first-child');
console.log(firstItem.nextSibling); // コメントノード
console.log(firstItem.nextSibling.nodeType); // 8（コメントノード）
console.log(firstItem.nextSibling.textContent); // " コメント "
実践的な例
previousSibling と nextSibling を活用する場面をいくつか紹介します。
例1: テキストノードをスキップする
// HTML構造
<div>
<p>最初の段落</p>
<p>2番目の段落</p>
</div>
// JavaScript
const firstParagraph = document.querySelector('p:first-of-type');
let nextSibling = firstParagraph.nextSibling;
while (nextSibling && nextSibling.nodeType !== 1) { // 要素ノードではない場合はスキップ
nextSibling = nextSibling.nextSibling;
}
console.log(nextSibling); // 次の要素ノード（2番目の段落）
例2: コメントノードを探す
// HTML構造
<div>
<p>最初の段落</p>
<!-- 注意: このコメントを残す -->
<p>2番目の段落</p>
</div>
// JavaScript
const secondParagraph = document.querySelector('p:last-of-type');
const previousSibling = secondParagraph.previousSibling;
if (previousSibling.nodeType === 8) { // コメントノードの場合
console.log('コメントノード発見:', previousSibling.textContent);
}
注意点とよくある間違い
previousSibling と nextSibling を使用する際には、以下の点に注意してください。
- テキストノードやコメントノードが混在する: 必要に応じて、
nodeTypeを確認してスキップするロジックを追加しましょう。 - 操作対象が
nullの場合: 兄弟ノードが存在しない場合、プロパティはnullを返します。nullを適切に扱うエラーチェックが必要です。