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

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

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

作成日: 更新日:

基本的な使い方

firstElementChildプロパティは、ある要素の最初の子要素をDOMElementオブジェクトとして保持する、読み取り専用のプロパティです。このプロパティは、指定された要素が持つ子ノードの中から、最初に見つかった要素ノードのみを返します。子ノードにはテキストノードやコメントノードなどが含まれる場合がありますが、firstElementChildプロパティはこれらをすべて無視し、HTMLのタグで表現される要素だけを対象とします。この点が、ノードの種類を問わず最初の子ノードを取得するfirstChildプロパティとの主な違いです。HTML構造の中から特定の子「要素」を直接かつ確実に取得したい場合に、このプロパティは非常に有効です。もし対象の要素に子要素が一つも存在しない場合、または子ノードがテキストやコメントのみで要素ノードが一つも含まれていない場合には、このプロパティの値はnullになります。

構文(syntax)

1<?php
2$html = '<div><p>First paragraph</p><span>Second element</span></div>';
3$dom = new DOMDocument();
4$dom->loadHTML($html, LIBXML_NOERROR);
5
6// 'div'要素(DOMElement)を取得します
7$divElement = $dom->getElementsByTagName('div')->item(0);
8
9// firstElementChildプロパティを使って最初の子要素を取得します
10$firstElement = $divElement->firstElementChild;
11
12// 取得した要素のタグ名を出力します
13echo $firstElement->tagName; // "p"

引数(parameters)

引数なし

引数はありません

戻り値(return)

DOMElement|null

DOMElementクラスのfirstElementChildプロパティは、要素の最初の子要素を表すDOMElementオブジェクト、または子要素が存在しない場合はnullを返します。

サンプルコード

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

1<?php
2
3/**
4 * DOMElement::firstElementChild プロパティの使用例を示します。
5 *
6 * この関数は、HTML文字列をDOMDocumentとしてロードし、
7 * 要素の最初の子要素(DOMElement型)を取得する方法を具体的に示します。
8 * 子要素が存在しない場合に null が返されるケースも確認できます。
9 */
10function demonstrateDOMFirstElementChild(): void
11{
12    // サンプルとなるHTML文字列を定義します。
13    // ここでは、階層的な構造を持つシンプルなHTMLを用意します。
14    $htmlContent = <<<HTML
15<!DOCTYPE html>
16<html>
17<body>
18    <div id="wrapper">
19        <p>これは最初の子要素の段落です。</p>
20        <span>これは2番目の子要素のスパンです。</span>
21    </div>
22    <div><!-- このdivは子要素がない --></div>
23</body>
24</html>
25HTML;
26
27    // 新しいDOMDocumentオブジェクトを作成します。
28    $dom = new DOMDocument();
29    // HTML文字列をDOMDocumentにロードします。
30    // loadHTMLはHTMLの構文エラーで警告を出すことがあるため、@ で警告を抑制することが一般的です。
31    @$dom->loadHTML($htmlContent);
32
33    echo "--- DOMElement::firstElementChild の使用例 ---" . PHP_EOL;
34
35    // 1. ドキュメントのルート要素 (<html>) を取得します。
36    // DOMDocument::documentElement はドキュメントのルート要素を返します。
37    $htmlElement = $dom->documentElement;
38
39    if ($htmlElement instanceof DOMElement) {
40        echo "現在の要素: <html>" . PHP_EOL;
41
42        // <html> 要素の最初の子要素を取得します。
43        // この場合、<body> 要素が最初の子要素になります。
44        $bodyElement = $htmlElement->firstElementChild;
45
46        if ($bodyElement instanceof DOMElement) {
47            echo "  <html> の最初の子要素は <" . $bodyElement->tagName . "> です。" . PHP_EOL; // 出力: <body>
48
49            // <body> 要素の最初の子要素を取得します。
50            // この場合、<div id="wrapper"> が最初の子要素になります。
51            $wrapperDiv = $bodyElement->firstElementChild;
52
53            if ($wrapperDiv instanceof DOMElement) {
54                echo "    <body> の最初の子要素は <" . $wrapperDiv->tagName . "> (id: " . $wrapperDiv->getAttribute('id') . ") です。" . PHP_EOL; // 出力: <div id="wrapper">
55
56                // <div id="wrapper"> の最初の子要素を取得します。
57                // この場合、<p> 要素が最初の子要素になります。
58                $firstParagraph = $wrapperDiv->firstElementChild;
59
60                if ($firstParagraph instanceof DOMElement) {
61                    echo "      <div id='wrapper'> の最初の子要素は <" . $firstParagraph->tagName . "> です。" . PHP_EOL; // 出力: <p>
62                    echo "        <p> 要素のテキストコンテンツ: '" . $firstParagraph->textContent . "'" . PHP_EOL;
63
64                    // <p> 要素は要素の子を持たないため、firstElementChild は null を返します。
65                    $noChildElement = $firstParagraph->firstElementChild;
66                    if ($noChildElement === null) {
67                        echo "        <p> 要素は要素の子を持たないため、firstElementChild は null を返しました。" . PHP_EOL;
68                    } else {
69                        // これは通常発生しないケースです。
70                        echo "        <p> の最初の子要素は <" . $noChildElement->tagName . "> です。" . PHP_EOL;
71                    }
72                } else {
73                    echo "      <div id='wrapper'> には要素の子がありません。" . PHP_EOL;
74                }
75            } else {
76                echo "    <body> には最初の子要素がありません。" . PHP_EOL;
77            }
78        } else {
79            echo "  <html> には最初の子要素がありません。" . PHP_EOL;
80        }
81    } else {
82        echo "ドキュメントにルート要素 (<html>) が見つかりませんでした。" . PHP_EOL;
83    }
84}
85
86// 関数を実行して DOMElement::firstElementChild の動作を確認します。
87demonstrateDOMFirstElementChild();

PHP 8のDOMElement::firstElementChildは、DOMツリー内の特定の要素が持つ「最初の子要素」を取得するためのプロパティです。このプロパティは引数を取らず、戻り値としてDOMElementオブジェクトを返しますが、最初の子要素が存在しない場合にはnullを返します。

このプロパティは、HTMLやXMLのようなマークアップ言語で記述された構造をPHPプログラムで操作する際に非常に便利です。例えば、ウェブページから特定のセクションの最初の要素だけを抽出したい場合や、要素の階層をたどって必要な情報に効率的にアクセスしたい場合などに使用されます。

サンプルコードでは、定義されたHTML文字列をDOMDocumentにロードし、そのドキュメント内の要素をfirstElementChildを使って順にたどる具体例を示しています。例えば、<html>要素から<body>へ、さらにその中の<div><p>といった最初の要素を効率的に取得できる様子がわかります。子要素が存在しない場合にはnullが返されるため、取得した値がnullでないかを確認することで、安全かつ堅牢なプログラムを作成することができます。

DOMElement::firstElementChildプロパティは、対象となる要素の最初の子要素ノードのみを返します。テキストノードやコメントノードは無視されるため、firstChildプロパティとは異なる点にご注意ください。子要素が存在しない場合はnullが返される仕様ですので、戻り値がDOMElement型であるかnullであるかを必ず確認し、適切な処理を行う安全なコーディングが重要です。サンプルコードのようにinstanceof DOMElementを用いて型チェックを行う方法が推奨されます。また、DOMDocument::loadHTMLはHTMLの解析エラーで警告を出すことがあるため、本番環境では@による警告抑制に頼らず、例外処理やエラーハンドリングを適切に行うことが、安定したシステム運用につながります。

firstElementChildfirstChild の違いを理解する

1<?php
2
3/**
4 * DOMElementのfirstElementChildとfirstChildプロパティの違いを示すサンプルコード。
5 *
6 * firstElementChildプロパティは、子ノードのうち最初の「要素ノード」のみを返します。
7 * firstChildプロパティは、子ノードのうち最初の「ノード」(要素、テキスト、コメントなど、種類を問わず)を返します。
8 *
9 * システムエンジニアを目指す初心者向けに、HTML文字列をパースしてこれらの違いを明確に示します。
10 */
11function demonstrateDomElementFirstChildProperties(): void
12{
13    // 比較のために使用するHTML文字列
14    // DOMパーサーは改行やインデントの空白もテキストノードとして扱います。
15    $htmlContent = <<<HTML
16<div>
17    <!-- これはコメントノードです -->
18    これは最初のテキストノードです。
19    <p>これは最初の段落要素です。</p>
20    <span>これは2番目の要素です。</span>
21</div>
22HTML;
23
24    // 新しいDOMドキュメントを作成し、HTML文字列を読み込みます。
25    $dom = new DOMDocument();
26    // HTMLのパースに関する警告を抑制するために libxml_use_internal_errors を使用できますが、
27    // シンプルなHTMLなので、ここでは直接読み込みます。
28    $dom->loadHTML($htmlContent);
29
30    // ドキュメント内の <div> 要素を取得します。
31    // loadHTMLはHTML構造を補完するため、直接のルート要素ではありません。
32    $divElements = $dom->getElementsByTagName('div');
33    if ($divElements->length === 0) {
34        echo "<div>要素が見つかりませんでした。\n";
35        return;
36    }
37    // 最初の <div> 要素を対象とします。
38    $rootElement = $divElements->item(0); 
39
40    echo "--- パース対象のHTML構造 ---\n";
41    echo $htmlContent . "\n";
42    echo "--------------------------\n\n";
43
44    // DOMElement::firstElementChild プロパティの取得
45    // firstElementChildは、子ノードのうち最初の「要素ノード」のみを返します。
46    // テキストノードやコメントノードは無視されます。
47    $firstElement = $rootElement->firstElementChild;
48
49    echo "rootElement->firstElementChild:\n";
50    if ($firstElement instanceof DOMElement) {
51        echo "  ノード名 (タグ名): " . $firstElement->nodeName . "\n";
52        echo "  ノード値 (要素の内容): " . $firstElement->nodeValue . "\n";
53        echo "  期待されるノード: <p>要素 (HTMLソースの空白やコメントの後に来る最初の要素)\n";
54    } else {
55        echo "  最初の子要素は見つかりませんでした。(null)\n";
56    }
57    echo "\n";
58
59    // DOMElement::firstChild プロパティの取得
60    // firstChildは、子ノードのうち最初の「ノード」(要素、テキスト、コメントなど、種類を問わず)を返します。
61    $firstChild = $rootElement->firstChild;
62
63    echo "rootElement->firstChild:\n";
64    if ($firstChild instanceof DOMNode) {
65        // ノードタイプを表示して、どのような種類のノードかを示します。
66        echo "  ノードタイプ: " . (DOM_NODE_TYPE_NAMES[$firstChild->nodeType] ?? '不明') . " (数値: " . $firstChild->nodeType . ")\n";
67        // ノード名はそのノードの種類によって異なります (例: テキストノードは #text、コメントノードは #comment)。
68        echo "  ノード名: " . $firstChild->nodeName . "\n";
69        // ノード値が長い場合は短縮して表示します。
70        echo "  ノード値: " . (strlen($firstChild->nodeValue) > 50 ? substr($firstChild->nodeValue, 0, 50) . '...' : trim($firstChild->nodeValue)) . "\n";
71        echo "  期待されるノード: 改行とスペースのテキストノード (<!-- の前にある)\n";
72    } else {
73        echo "  最初の子ノードは見つかりませんでした。(null)\n";
74    }
75    echo "\n";
76}
77
78// DOMノードタイプを分かりやすく表示するための定数配列。
79// 初心者がnodeTypeの数値を理解するのに役立ちます。
80const DOM_NODE_TYPE_NAMES = [
81    XML_ELEMENT_NODE        => 'ELEMENT_NODE',         // 1: 要素ノード (例: <p>, <div>)
82    XML_ATTRIBUTE_NODE      => 'ATTRIBUTE_NODE',       // 2: 属性ノード (例: href="...")
83    XML_TEXT_NODE           => 'TEXT_NODE',            // 3: テキストノード (例: "Hello, World!")
84    XML_CDATA_SECTION_NODE  => 'CDATA_SECTION_NODE',   // 4: CDATAセクションノード
85    XML_ENTITY_REF_NODE     => 'ENTITY_REF_NODE',      // 5: エンティティ参照ノード
86    XML_ENTITY_NODE         => 'ENTITY_NODE',          // 6: エンティティノード
87    XML_PI_NODE             => 'PROCESSING_INSTRUCTION_NODE', // 7: 処理命令ノード
88    XML_COMMENT_NODE        => 'COMMENT_NODE',         // 8: コメントノード (例: <!-- ... -->)
89    XML_DOCUMENT_NODE       => 'DOCUMENT_NODE',        // 9: ドキュメントノード (ルート)
90    XML_DOCUMENT_TYPE_NODE  => 'DOCUMENT_TYPE_NODE',   // 10: DOCTYPEノード
91    XML_DOCUMENT_FRAG_NODE  => 'DOCUMENT_FRAGMENT_NODE',// 11: ドキュメントフラグメントノード
92    XML_NOTATION_NODE       => 'NOTATION_NODE',        // 12: 表記法ノード
93];
94
95// サンプルコードを実行します。
96demonstrateDomElementFirstChildProperties();
97

PHP 8のDOMElementクラスには、特定の要素の最初の子ノードにアクセスするためのfirstElementChildプロパティがあります。このプロパティは引数を取らず、戻り値として最初の子「要素ノード」をDOMElementオブジェクトとして返します。もし最初の子要素ノードが存在しない場合はnullを返します。このプロパティは、テキストノードやコメントノードといった要素以外のノードを無視し、HTMLタグを持つ要素ノードのみを対象とする点が特徴です。

これに対し、同じくDOMElementクラスのfirstChildプロパティは、引数を取らず、最初の子「ノード」を種類を問わずDOMNodeオブジェクトとして返します。この「ノード」には要素ノードだけでなく、HTML構造における改行やインデントによる空白文字列もテキストノードとして、またコメントもコメントノードとして含まれます。

サンプルコードでは、<div>要素を例にこれらの違いを明確に示しています。HTML文字列をパースした後、firstElementChildプロパティは<div>内の空白やコメントをスキップして最初の<p>要素を取得します。一方、firstChildプロパティは<div>タグ直後の改行とインデントの空白をテキストノードとして取得する様子が確認できます。この違いを理解することは、DOM操作において目的のノードに正確にアクセスするために不可欠です。

firstElementChildは、対象要素の最初の子「要素ノード」のみを返します。一方、firstChildは、要素、テキスト、コメントなど種類を問わず、最初の子「ノード」を返します。

特にHTMLのパースでは、改行やインデントのための空白もテキストノードとして扱われるため、firstChildが予期せぬテキストノードを返すことがあります。目的の子ノードを正確に取得するためには、この違いを理解し、適切に使い分けることが重要です。また、どちらのプロパティも該当するノードが見つからない場合はnullを返すため、利用する際は必ずnullチェックを行い、安全にコードを記述してください。

関連コンテンツ

関連IT用語

関連プログラミング言語