JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでリスト要素の兄弟ノードを取得する方法｜nextSiblingプロパティの使い方

JavaScriptには、リスト要素の兄弟を取得するためのプロパティとして node.nextSibling が用意されています。リスト内の任意の要素さえ特定できれば、その兄弟要素を簡単に見つけ出すことができます。

この記事では、nextSibling プロパティの基本構文と、実際のコード例を使った使い方をわかりやすく解説します。

基本構文

node.nextSibling;

例1：最初の要素の兄弟を取得する

次の例では、3つのリスト要素（li）を用意しています。nextSibling プロパティを使って、最初の要素の兄弟要素を取得し、その結果を出力画面に表示します。

<html>
<body>
<ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul>
<p id="next"></p>
<script>
var x = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("next").innerHTML = "兄弟要素は " + x;
</script>
</body>
</html>

実行結果

Tesla
Spacex
Solarcity
兄弟要素は Spacex

このコードでは、IDが item1 の要素に対して nextSibling を呼び出すことで、直後にある item2（Spacex） を取得しています。

例2：2番目の要素の兄弟を取得する

続いて、2番目の要素に対して nextSibling プロパティを使用した例です。兄弟要素とは、対象となる要素の次に位置する要素のことを指します。

<html>
<body>
<ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul>
<p id="next"></p>
<script>
var x = document.getElementById("item2").nextSibling.innerHTML;
document.getElementById("next").innerHTML = "兄弟要素は " + x;
</script>
</body>
</html>

実行結果

Tesla
Spacex
Solarcity
兄弟要素は Solarcity

注意点：空白によるテキストノードに気をつける

nextSibling は「次のノード」を返すため、HTML内で要素同士の間に改行やスペースがあると、意図した要素ではなくテキストノードを取得してしまうことがあります。

確実に要素だけを取得したい場合は、nextElementSibling を使うのがおすすめです。

var x = document.getElementById("item1").nextElementSibling.innerHTML;

このように記述すれば、HTMLの書き方に関係なく、常に次の要素を正しく取得できます。

  1. JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

    JavaScriptでDOM操作を行っていると、ある要素の親要素にアクセスしたい場面によく出会います。そんなときに活躍するのがparentNodeプロパティです。このプロパティは、対象ノードの直接の親ノードを返します。 本記事では、クリックイベントとparentNodeプロパティを組み合わせて、クリックされた子要素の親要素を取得し、そのクラス名を画面に表示するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&qu

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in