Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【PHP8.x】Dom\HTMLElement::nextElementSiblingプロパティの使い方

nextElementSiblingプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

nextElementSiblingプロパティは、DOM (Document Object Model) の Dom\HTMLElement クラスに属するプロパティであり、現在の要素の直後にある兄弟要素(同じ親要素を持つ要素)のうち、要素ノードであるものを返します。もし、直後の兄弟要素が存在しない、あるいは要素ノードでない場合は null を返します。

具体的には、HTML や XML ドキュメントの構造をプログラムから操作する際に、ある要素から見てすぐ後ろにある要素を取得したい場合に利用します。例えば、リスト構造において、あるリストアイテムの次のアイテムを取得したり、テーブル構造において、あるセルの次のセルを取得したりするのに役立ちます。

このプロパティは読み取り専用であり、値を直接設定することはできません。DOM ツリーの構造を変更するには、他の DOM 操作メソッド(例えば、insertBeforeappendChild など)を使用する必要があります。nextElementSibling プロパティは、あくまで現在の DOM 構造における要素間の関係を調べるために用いられます。

このプロパティを利用することで、DOM ツリーを効率的に走査し、特定の条件を満たす要素を検索したり、要素間の関係に基づいて処理を実行したりすることが可能になります。特に、動的にコンテンツが変化するウェブページにおいて、要素の構造を解析し、必要な情報を抽出する際に有用です。PHP の DOM 拡張機能を利用してウェブスクレイピングを行う場合などにも、このプロパティは頻繁に利用されます。

構文(syntax)

1Dom\HTMLElement::$nextElementSibling;

引数(parameters)

引数なし

引数はありません

戻り値(return)

Dom\HTMLElement|null

現在の要素の直後にある兄弟要素(同じ親を持つ次の要素)を返します。 直後の兄弟要素が存在しない場合は null を返します。

サンプルコード

PHP: nextElementSiblingで次の要素を取得する

1<?php
2
3/**
4 * Dom\HTMLElement::nextElementSibling プロパティの基本的な使い方をデモンストレーションします。
5 * このプロパティは、現在の要素の次の兄弟要素(Elementノードのみ)を返します。
6 * コメントノードやテキストノードはスキップされます。
7 */
8function demonstrateNextElementSibling(): void
9{
10    // デモンストレーション用のシンプルなHTML構造を定義します。
11    // p, span, div要素の間にコメントノードやテキストノードを含め、
12    // nextElementSiblingがこれらをスキップすることを確認します。
13    $html = <<<HTML
14    <div id="parent-container">
15        <p id="first-element">最初の段落</p>
16        <!-- これはコメントノードです -->
17        ただのテキストノード
18        <span id="second-element">次の要素 (スパン)</span>
19        <div id="third-element">さらに次の要素 (ディビジョン)</div>
20        <p id="last-element">最後の段落</p>
21    </div>
22    HTML;
23
24    // DOMDocumentオブジェクトを作成し、HTMLを読み込みます。
25    // @ を使用して、HTMLが完全なドキュメントではないことによる警告を抑制します。
26    $dom = new DOMDocument();
27    @$dom->loadHTML($html);
28
29    // ID 'first-element' を持つ要素を取得します。
30    // getElementById は DOMElement を返しますが、これは Dom\HTMLElement の子孫です。
31    $currentElement = $dom->getElementById('first-element');
32
33    if ($currentElement instanceof Dom\HTMLElement) {
34        echo "現在の要素: <{$currentElement->tagName} id=\"{$currentElement->id}\">\n";
35
36        // nextElementSibling を使用して次の兄弟要素を取得します。
37        // この場合、コメントノードとテキストノードはスキップされ、<span id="second-element"> が返されます。
38        $nextElement = $currentElement->nextElementSibling;
39
40        if ($nextElement instanceof Dom\HTMLElement) {
41            echo "  -> nextElementSibling: <{$nextElement->tagName} id=\"{$nextElement->id}\">\n";
42        } else {
43            echo "  -> nextElementSibling: null (次の兄弟要素が見つかりません)\n";
44        }
45
46        echo "\n"; // 出力を見やすくするための改行
47
48        // 次に、<span id="second-element"> から始めます。
49        $currentElement = $dom->getElementById('second-element');
50        if ($currentElement instanceof Dom\HTMLElement) {
51            echo "現在の要素: <{$currentElement->tagName} id=\"{$currentElement->id}\">\n";
52            $nextElement = $currentElement->nextElementSibling;
53            if ($nextElement instanceof Dom\HTMLElement) {
54                echo "  -> nextElementSibling: <{$nextElement->tagName} id=\"{$nextElement->id}\">\n";
55            } else {
56                echo "  -> nextElementSibling: null\n";
57            }
58        }
59
60        echo "\n"; // 出力を見やすくするための改行
61
62        // 最後に、HTML内の最後の要素 <p id="last-element"> から始めます。
63        // この場合、nextElementSibling は null を返すはずです。
64        $currentElement = $dom->getElementById('last-element');
65        if ($currentElement instanceof Dom\HTMLElement) {
66            echo "現在の要素: <{$currentElement->tagName} id=\"{$currentElement->id}\">\n";
67            $nextElement = $currentElement->nextElementSibling;
68            if ($nextElement instanceof Dom\HTMLElement) {
69                echo "  -> nextElementSibling: <{$nextElement->tagName} id=\"{$nextElement->id}\">\n";
70            } else {
71                echo "  -> nextElementSibling: null (最後の要素なので想定通り)\n";
72            }
73        }
74
75    } else {
76        echo "エラー: ID 'first-element' の要素が見つかりませんでした。\n";
77    }
78}
79
80// デモンストレーション関数を実行します。
81demonstrateNextElementSibling();

PHP 8のDom\HTMLElement::nextElementSiblingプロパティは、現在のHTML要素の直後に位置する「次の兄弟要素」を取得します。このプロパティは、HTMLコメントやテキストノードなどの要素ではない兄弟ノードはすべてスキップし、次のHTML要素ノード(例: <p>, <div>など)のみを対象とします。引数はなく、戻り値は次の兄弟要素があればDom\HTMLElementオブジェクトを、見つからなければnullを返します。

提供されたサンプルコードは、このプロパティの基本的な使い方をデモンストレーションしています。具体的には、HTML構造内の<p>要素から開始し、間にコメントやテキストノードがあってもそれらを無視して、直後の<span>要素や<div>要素を正しく取得する様子が示されます。また、兄弟要素が存在しない場合はnullが返されることも確認でき、HTMLのDOM構造を効率的にたどって目的の要素を操作するのに役立ちます。

このプロパティは、現在のHTML要素の**次の兄弟要素(Elementノードのみ)**を取得します。コメントノードやテキストノードは完全にスキップされますので、HTMLのDOM構造を正確に理解した上で利用することが重要です。次の兄弟要素が存在しない場合や、現在の要素がその親要素の最後の兄弟要素である場合はnullを返します。そのため、取得した値がnullでないか、またDom\HTMLElement型であるかを確認するコードを常に記述し、エラーを避けるようにしてください。DOMDocument::getElementByIdなどで取得した要素も、このプロパティを安全に利用できます。

Dom\HTMLElement::nextElementSiblingで次の兄弟要素を取得する

1<?php
2
3/**
4 * Dom\HTMLElement::nextElementSibling プロパティの動作を示すサンプル関数。
5 *
6 * このプロパティは、指定された要素の次の兄弟要素(要素ノードのみ)を返します。
7 * コメントノードやテキストノードは無視されます。
8 * 兄弟要素が存在しない場合は null を返します。
9 */
10function demonstrateNextElementSibling(): void
11{
12    // サンプルとなるHTML文字列を定義します。
13    // コメントノードやテキストノードが含まれていることに注意してください。
14    $htmlString = <<<HTML
15<!DOCTYPE html>
16<html>
17<head>
18    <title>NextElementSibling Demo</title>
19</head>
20<body>
21    <ul id="fruitList">
22        <li>Apple</li>
23        <!-- これはコメントノードです -->
24        <li>Banana</li>
25        
26        <li>Cherry</li>
27        <!-- 最後の要素なので次はありません -->
28    </ul>
29    <p>This is a paragraph after the list.</p>
30    <div>Another div.</div>
31</body>
32</html>
33HTML;
34
35    // DOMDocument オブジェクトを初期化し、HTML文字列を読み込みます。
36    $dom = new DOMDocument();
37    // HTMLパース時の警告を抑制し、きれいな出力を保ちます。
38    libxml_use_internal_errors(true);
39    $dom->loadHTML($htmlString);
40    libxml_clear_errors(); // エラー状態をクリア
41
42    // XPath を使用して要素を効率的に検索します。
43    $xpath = new DOMXPath($dom);
44
45    echo "--- Dom\\HTMLElement::nextElementSibling の動作例 ---" . PHP_EOL . PHP_EOL;
46
47    // 1. 最初の `<li>` 要素(Apple)を取得し、その次の兄弟要素を探します。
48    /** @var Dom\HTMLElement|null $appleElement */
49    $appleElement = $xpath->query('//ul[@id="fruitList"]/li[1]')->item(0);
50
51    if ($appleElement) {
52        echo "現在の要素: '{$appleElement->textContent}' (タグ: {$appleElement->tagName})" . PHP_EOL;
53
54        // nextElementSibling を使って次の兄弟要素を取得します。
55        // コメントノードをスキップして、"Banana" が取得されるはずです。
56        /** @var Dom\HTMLElement|null $nextAfterApple */
57        $nextAfterApple = $appleElement->nextElementSibling;
58
59        if ($nextAfterApple) {
60            echo "  次の兄弟要素: '{$nextAfterApple->textContent}' (タグ: {$nextAfterApple->tagName})" . PHP_EOL;
61            echo "  期待される結果: 'Banana'" . PHP_EOL . PHP_EOL;
62        } else {
63            echo "  次の兄弟要素は見つかりませんでした。" . PHP_EOL . PHP_EOL;
64        }
65    } else {
66        echo "要素 'Apple' が見つかりませんでした。" . PHP_EOL . PHP_EOL;
67    }
68
69    // 2. 最後の `<li>` 要素(Cherry)を取得し、その次の兄弟要素を探します。
70    /** @var Dom\HTMLElement|null $cherryElement */
71    $cherryElement = $xpath->query('//ul[@id="fruitList"]/li[last()]')->item(0);
72
73    if ($cherryElement) {
74        echo "現在の要素: '{$cherryElement->textContent}' (タグ: {$cherryElement->tagName})" . PHP_EOL;
75
76        // nextElementSibling を使って次の兄弟要素を取得します。
77        // リストの最後の要素なので、次の要素は存在せず、null が返されるはずです。
78        /** @var Dom\HTMLElement|null $nextAfterCherry */
79        $nextAfterCherry = $cherryElement->nextElementSibling;
80
81        if ($nextAfterCherry) {
82            echo "  次の兄弟要素: '{$nextAfterCherry->textContent}' (タグ: {$nextAfterCherry->tagName})" . PHP_EOL;
83        } else {
84            echo "  次の兄弟要素は見つかりませんでした (null が返されました)。" . PHP_EOL;
85            echo "  期待される結果: null" . PHP_EOL . PHP_EOL;
86        }
87    } else {
88        echo "要素 'Cherry' が見つかりませんでした。" . PHP_EOL . PHP_EOL;
89    }
90    
91    // 3. `<ul>` 要素全体を取得し、その次の兄弟要素を探します。
92    /** @var Dom\HTMLElement|null $fruitListElement */
93    $fruitListElement = $xpath->query('//ul[@id="fruitList"]')->item(0);
94
95    if ($fruitListElement) {
96        echo "現在の要素: '{$fruitListElement->tagName}' (リスト全体)" . PHP_EOL;
97
98        // nextElementSibling を使って次の兄弟要素を取得します。
99        // `<ul>` の次の要素は `<p>` タグです。
100        /** @var Dom\HTMLElement|null $nextAfterList */
101        $nextAfterList = $fruitListElement->nextElementSibling;
102
103        if ($nextAfterList) {
104            echo "  次の兄弟要素: '{$nextAfterList->textContent}' (タグ: {$nextAfterList->tagName})" . PHP_EOL;
105            echo "  期待される結果: 'This is a paragraph after the list.' (タグ: p)" . PHP_EOL . PHP_EOL;
106        } else {
107            echo "  次の兄弟要素は見つかりませんでした。" . PHP_EOL . PHP_EOL;
108        }
109    } else {
110        echo "要素 'fruitList' が見つかりませんでした。" . PHP_EOL . PHP_EOL;
111    }
112}
113
114// 関数を実行して、nextElementSibling の動作を確認します。
115demonstrateNextElementSibling();
116

PHP 8で導入されたDom\HTMLElementクラスに属するnextElementSiblingプロパティは、HTML文書内の特定の要素の直後にある「次の兄弟要素」を取得するために使用されます。ここで言う兄弟要素とは、同じ親要素を持つ要素を指します。このプロパティの大きな特徴は、HTMLを構成する要素ノード(<div><li>といったタグ)のみを対象とし、コメントノードやテキストノードは完全に無視してスキップする点です。

このプロパティは引数を必要としません。呼び出すと、次の兄弟要素が見つかった場合は、その要素を表すDom\HTMLElementオブジェクトを返します。しかし、現在の要素の後に要素ノードがもう存在しない場合(例えば、親要素内の最後の要素である場合など)は、nullが返されます。

サンプルコードでは、<ul>リスト内の<li>要素を例に挙げています。最初の<li>要素からnextElementSiblingを使用すると、間にコメントノードがあってもそれを飛ばして、次の<li>要素が取得される様子を確認できます。また、リストの最後の<li>要素から呼び出した場合には、次に要素ノードが存在しないためnullが返されることが示されており、このプロパティの挙動が具体的に理解できます。

nextElementSiblingプロパティは、指定された要素の次の兄弟要素のうち、HTMLタグで構成される「要素ノード」のみを返します。コメントノードやテキストノード(改行や空白なども含む)は完全に無視されるため、nextSiblingプロパティとの混同に注意が必要です。次の兄弟要素が存在しない場合はnullを返しますので、必ずnullチェックを行い、返り値がDom\HTMLElementオブジェクトであることを確認してから操作してください。このnullチェックを怠ると、存在しないプロパティにアクセスするなどのエラーが発生する可能性があります。安全なコード運用のために、HTMLをパースするDOMDocumentの読み込み時にもエラー処理を行うことを推奨します。

関連コンテンツ

関連IT用語

関連プログラミング言語