いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ
Webエンジニア向けプログラミング解説動画をYouTubeで配信中！
▶ チャンネル登録はこちら

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

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

作成日: 更新日:

基本的な使い方

firstElementChildプロパティは、DOM（Document Object Model）におけるHTMLElementオブジェクトが持つ、最初の子要素ノードを返すプロパティです。HTMLElementはHTML要素を表現するクラスであり、firstElementChildプロパティを使用することで、その要素の直下にある最初の子要素にアクセスできます。

具体的には、指定された要素ノードのchildNodesリストを検索し、最初に現れる要素ノード（Elementノード）を返します。もし子要素が存在しない場合や、子要素がテキストノードやコメントノードである場合は、nullを返します。要素ノードとは、HTMLタグで定義される要素（例えば、<p>、<div>、<span>など）のことです。テキストノードはテキストデータ、コメントノードはHTMLのコメント（<!-- コメント -->）をそれぞれ表します。

このプロパティは、DOMツリーを操作する際に、特定の要素の子要素を効率的に取得するために役立ちます。例えば、ある<div>要素の中にある最初の段落<p>要素にアクセスしたい場合などに利用できます。firstElementChildプロパティを利用することで、childNodesリストをループで回して要素の種類をチェックする手間を省き、より簡潔なコードで目的の要素を取得できます。

firstElementChildプロパティは読み取り専用であり、値を変更することはできません。HTMLElementオブジェクトが持つ最初の子要素は、DOMツリーの構造によって決定されるためです。要素の追加や削除など、DOMツリーの構造を変更する操作を行った場合、firstElementChildプロパティの値も自動的に更新されます。

構文(syntax)

1readonly public ?Dom\Element $firstElementChild;

引数(parameters)

引数なし

引数はありません

戻り値(return)

DOMElement|null

このプロパティは、対象のHTMLElement要素の最初の子要素であるDOMElementオブジェクト、または子要素が存在しない場合はnullを返します。

サンプルコード

PHP DOM firstElementChild で最初の子要素を取得する

1<?php
2
3/**
4 * HTML文字列をパースし、指定された要素のfirstElementChildプロパティの動作を示します。
5 *
6 * firstElementChildプロパティは、要素の最初の子である「要素ノード」を返します。
7 * テキストノードやコメントノードは無視されます。
8 * 子要素ノードが存在しない場合はnullを返します。
9 */
10function demonstrateFirstElementChild(): void
11{
12    // サンプルHTML文字列を定義します。
13    // このHTMLでは、<body>の最初の子要素ノードは<h1>になります。
14    // コメントやテキストノードはスキップされます。
15    $htmlContent = <<<HTML
16<!DOCTYPE html>
17<html>
18<head>
19    <title>First Element Child Demo</title>
20</head>
21<body>
22    <!-- これはボディ内のコメントです -->
23    これは最初のテキストノードです。
24    <h1>PHP Dom\HTMLElement::firstElementChild の例</h1>
25    <p>これは2番目の要素ノードです。</p>
26</body>
27</html>
28HTML;
29
30    // DOMDocumentオブジェクトを作成し、HTMLをロードします。
31    $dom = new DOMDocument();
32    // loadHTMLのオプションは、HTMLの厳密なパースを試みます。
33    // エラーが出ても処理を続行するため、@ をつけてエラー出力を抑制しています
34    // (本番環境では通常、エラーを適切に処理すべきです)。
35    @$dom->loadHTML($htmlContent, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
36
37    // <body>要素を取得します。
38    // getElementsByTagNameはDOMNodeListを返すため、item(0)でリストの最初の要素を取得します。
39    // PHP 8では、DOMDocumentから取得した要素はDom\HTMLElementのプロパティ（firstElementChildなど）を
40    // 利用できます。
41    $bodyElement = $dom->getElementsByTagName('body')->item(0);
42
43    // <body>要素が正しく取得できたか確認します。
44    if ($bodyElement instanceof \Dom\HTMLElement) {
45        echo "<body>要素が見つかりました。\n";
46
47        // firstElementChildプロパティを使用して、<body>の最初の子要素ノードを取得します。
48        // このプロパティは Dom\Element (実質 Dom\HTMLElement) または null を返します。
49        $firstElementChild = $bodyElement->firstElementChild;
50
51        // 取得した子要素がnullでないことを確認し、その情報を表示します。
52        if ($firstElementChild !== null) {
53            echo "<body>の最初の子要素（要素ノード）のタグ名: " . $firstElementChild->tagName . "\n";
54            echo "<body>の最初の子要素（要素ノード）のtextContent: " . $firstElementChild->textContent . "\n";
55        } else {
56            echo "<body>要素には子要素（要素ノード）がありませんでした。\n";
57        }
58    } else {
59        echo "<body>要素が見つからないか、処理できませんでした。\n";
60    }
61
62    echo "\n--- 要素ノードがない場合の例 ---\n";
63
64    // 別のHTML文字列を定義します。
65    // このHTMLでは、<div>内にコメントとテキストノードのみがあり、要素ノードがありません。
66    $htmlNoElementChildren = <<<HTML
67<div>
68    <!-- これはコメントです -->
69    これはテキストノードです。
70</div>
71HTML;
72
73    $domNoElements = new DOMDocument();
74    @$domNoElements->loadHTML($htmlNoElementChildren, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
75    $divElement = $domNoElements->getElementsByTagName('div')->item(0);
76
77    if ($divElement instanceof \Dom\HTMLElement) {
78        echo "<div>要素が見つかりました。\n";
79        $firstElementChildOfDiv = $divElement->firstElementChild;
80
81        // この場合、firstElementChildはnullを返します。
82        if ($firstElementChildOfDiv !== null) {
83            echo "<div>の最初の子要素（要素ノード）のタグ名: " . $firstElementChildOfDiv->tagName . "\n";
84        } else {
85            echo "<div>要素には子要素（要素ノード）がありませんでした。これは期待通りの結果です。\n";
86        }
87    } else {
88        echo "<div>要素が見つかりませんでした。\n";
89    }
90}
91
92// 関数を実行してサンプルコードの動作を確認します。
93demonstrateFirstElementChild();
94

PHPのDom\HTMLElement::firstElementChildプロパティは、指定したHTML要素の直下にある子ノードの中から、最初の「要素ノード」を取得するために使用されます。ここでいう要素ノードとは、<div>や<p>、<h1>のような実際のHTMLタグを指し、コメントノード（<!-- ... -->）やテキストノードは無視されます。

このプロパティは引数を取りません。戻り値としては、最初の子要素ノードが存在すればそのDOMElementオブジェクト（PHP 8では実質的にDom\HTMLElementとして扱われます）を返し、子要素ノードが全く存在しない場合はnullを返します。

サンプルコードでは、まずHTML文字列をパースし、DOMDocumentオブジェクトに読み込ませています。次に、<body>要素を取得し、そのfirstElementChildプロパティを使って最初の子要素ノードを取得する例を示しています。このHTMLでは、<body>の直後にコメントやテキストノードがありますが、これらはスキップされ、最初に見つかる<h1>タグがfirstElementChildとして取得されます。その結果、<h1>のタグ名とtextContentが表示されます。

また、要素ノードが存在せず、コメントノードやテキストノードのみが含まれる<div>要素を例に、firstElementChildがnullを返すケースも示されており、プロパティの正確な挙動を理解するのに役立ちます。これにより、HTML構造を解析し、特定の要素の子要素ノードを安全かつ効率的に取得することが可能です。

firstElementChildプロパティは、要素ノードのみを対象とし、テキストノードやコメントノードは無視します。子要素ノードが存在しない場合はnullを返しますので、必ずnullチェックを行い、結果がnullでないことを確認してからプロパティにアクセスしてください。DOMDocumentから取得した要素は、期待する型（Dom\HTMLElementなど）のインスタンスであるかinstanceofで確認すると、より安全にコードを記述できます。また、サンプルコードではloadHTMLのエラーを抑制していますが、実運用ではHTMLの解析エラーを適切に処理し、デバッグやシステムの安定稼働に役立てることを強く推奨します。

Dom\HTMLElement::firstElementChild を取得する

1<?php
2
3// このサンプルコードは、PHP 8 の Dom\HTMLElement クラスが持つ
4// firstElementChild プロパティの使用方法を示します。
5// firstElementChild は、特定の要素の最初の子要素ノード (タグのみ) を返します。
6// テキストノードやコメントノードは無視されます。
7
8/**
9 * Dom\HTMLElement::firstElementChild の使用例を示す関数。
10 * システムエンジニアを目指す初心者向けに、簡潔に動作を説明します。
11 */
12function demonstrateFirstElementChild(): void
13{
14    // 1. サンプルとなるHTML文字列を定義します。
15    //    <body>要素の内部には、コメントノードといくつかの要素ノード (<h1>, <p>) があります。
16    //    firstElementChild は要素ノードのみを対象とすることに注目してください。
17    $htmlContent = <<<HTML
18    <!DOCTYPE html>
19    <html>
20    <head>
21        <title>First Element Child サンプル</title>
22    </head>
23    <body>
24        <!-- これは最初のノードですが、コメントノードです -->
25        <h1>ようこそ！</h1>
26        <p>これは最初の段落です。</p>
27        <p>これは2番目の段落です。</p>
28    </body>
29    </html>
30    HTML;
31
32    // 2. Dom\HTMLDocument オブジェクトを作成し、上記のHTMLコンテンツを読み込みます。
33    //    これにより、PHP内でHTMLドキュメントを操作できるようになります。
34    $document = new Dom\HTMLDocument();
35    $document->loadHTML($htmlContent);
36
37    // 3. ドキュメントから <body> 要素を取得します。
38    //    Dom\HTMLDocument::body プロパティは、HTMLドキュメントの <body> 要素を
39    //    Dom\HTMLElement オブジェクトとして返します。
40    $bodyElement = $document->body;
41
42    // <body>要素が正しく取得できたかを確認します。
43    if ($bodyElement instanceof Dom\HTMLElement) {
44        echo "--- Dom\\HTMLElement::firstElementChild の使用例 ---\n";
45
46        // 4. <body>要素の firstElementChild プロパティにアクセスします。
47        //    このプロパティは、<body>の子ノードの中から、最初に見つかる「要素ノード (HTMLタグ)」を返します。
48        //    上記のHTMLでは、コメントノードの次にある <h1> タグが該当します。
49        $firstElement = $bodyElement->firstElementChild;
50
51        // firstElementChild が要素を返したかを確認します。
52        if ($firstElement instanceof Dom\Element) {
53            echo "<body>の最初の子要素 (firstElementChild):\n";
54            echo "  タグ名: " . $firstElement->tagName . "\n";
55            echo "  テキストコンテンツ: " . $firstElement->textContent . "\n";
56        } else {
57            echo "<body>には要素の子ノードが見つかりませんでした。\n";
58        }
59
60        echo "\n--- 参考: Dom\\Node::firstChild との比較 ---\n";
61        // firstChild プロパティは、Dom\Node クラスに属し、テキストノードやコメントノードを含む、
62        // すべての子ノードのうち最初のノードを返します。firstElementChild との違いに注目してください。
63        $firstChild = $bodyElement->firstChild;
64
65        if ($firstChild instanceof Dom\Node) {
66            echo "<body>の最初の子ノード (firstChild):\n";
67            echo "  ノード名: " . $firstChild->nodeName . " (コメントノードは '#comment')\n";
68            echo "  ノードタイプ: " . $firstChild->nodeType . " (コメントは " . Dom\Node::COMMENT_NODE . ")\n";
69            if ($firstChild->nodeType === Dom\Node::COMMENT_NODE) {
70                echo "  コメント内容: " . $firstChild->textContent . "\n";
71            }
72        } else {
73            echo "<body>には子ノードが見つかりませんでした。\n";
74        }
75
76        echo "\n要約:\n";
77        echo "  - firstElementChild は、子ノードの中から最初の『HTMLタグ（要素ノード）』だけを探します。\n";
78        echo "  - firstChild は、子ノードの中から最初に見つかる『すべてのノード（コメント、テキスト、要素など）』を対象とします。\n";
79
80    } else {
81        echo "エラー: HTMLドキュメントに <body> 要素が見つかりませんでした。\n";
82    }
83}
84
85// 上記の関数を実行して、firstElementChild の動作を確認します。
86demonstrateFirstElementChild();
87

PHP 8のDom\HTMLElement::firstElementChildは、HTMLドキュメントをプログラムで操作するためのDOM拡張機能が提供するプロパティです。このプロパティは、特定のHTML要素の直接の子ノードの中から、最初に見つかる「要素ノード」（HTMLタグ）を取得するために使用されます。たとえば、親要素の内部にコメントやテキストがあっても、それらは無視され、最初に出現する<h1>や<p>といったHTMLタグだけを対象とします。

このプロパティに引数は必要ありません。戻り値としては、最初の子要素ノードが見つかった場合はDom\Elementクラスのオブジェクトが返され、子要素が存在しない場合はnullが返されます。

似たプロパティにDom\Node::firstChildがありますが、firstChildがコメントやテキストを含むあらゆる種類の子ノードを対象とするのに対し、firstElementChildは要素ノードに限定して処理を行います。この違いにより、HTMLの構造の中から特定のタグだけを効率的かつ明確に探し出したい場合に、firstElementChildは非常に便利です。

Dom\HTMLElement::firstElementChild は、指定されたHTML要素の直下にある最初の子要素（HTMLタグ）のみを返します。コメントやテキストノードは無視される点が重要です。全ての子ノードを対象とする Dom\Node::firstChild とは動作が異なるため、混同しないようご注意ください。子要素が存在しない場合は null を返しますので、取得した値を使用する前には if ($element instanceof Dom\Element) のように、必ず要素が取得できたかを確認し、null の可能性を考慮した処理を実装するようにしてください。これにより、プログラムの予期せぬエラーを防ぎ、安全にコードを利用できます。

関連コンテンツ

関連IT用語

関連プログラミング言語