【PHP8.x】Dom\Element::firstElementChildプロパティの使い方
firstElementChildプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
firstElementChildプロパティは、PHPのDOM操作において、特定の要素の最初の子要素（Elementノード）を保持するプロパティです。このプロパティは、Dom\Elementクラスのインスタンスからアクセスできます。HTMLやXMLといったドキュメントの構造をプログラムで操作する際に、親要素直下にある多く存在する可能性のある子要素の中から、最初に見つかる「要素」（タグで囲まれた部分）を効率的に取得するために使用されます。
具体的には、ウェブページの特定の<div>要素の中から、最初に見つかる<span>要素や<p>要素などの子要素に直接アクセスしたい場合に役立ちます。このプロパティが返すのは、テキストノードやコメントノードのような要素ではないノードを含まず、必ず要素ノード（タグで囲まれた要素）のみです。したがって、余分な空白文字や改行などがテキストノードとして存在する場合でも、それらを無視して純粋な要素ノードに焦点を当てることができます。
もし対象となる要素に子要素が一つも存在しない場合、firstElementChildプロパティはnullを返します。これは、プログラミングにおいて子要素の存在チェックを行う際に非常に重要な挙動です。親要素の子要素を探索し、その内容を変更したり、属性を読み取ったりする場面で頻繁に活用されます。システムエンジニアを目指す初心者の方にとって、DOM（Document Object Model）を学習する上で、要素間の親子関係を理解し、効率的にノードにアクセスするための基本的な手段の一つとして、このプロパティは非常に重要です。
構文(syntax)
1<?php 2 3$dom = new DOMDocument(); 4$dom->loadXML('<html><body><header></header><main></main></body></html>'); 5 6// ドキュメントのルート要素 (<html>) を取得 7$htmlElement = $dom->documentElement; 8 9// <html>要素の最初の子要素 (<header>) を取得 10// Dom\Element オブジェクトから firstElementChild プロパティにアクセスする 11$firstElementChild = $htmlElement->firstElementChild; 12 13if ($firstElementChild) { 14 echo "最初の子要素の名前: " . $firstElementChild->nodeName; // 出力: 最初の子要素の名前: header 15} else { 16 echo "子要素がありません。"; 17} 18 19?>
引数(parameters)
引数なし
引数はありません
戻り値(return)
Dom\Element|null
このプロパティは、指定されたDOM要素の最初の子要素であるDom\Elementオブジェクト、または子要素が存在しない場合はnullを返します。
サンプルコード
PHP Dom\Element: firstElementChild で最初の子要素を取得する
1<?php 2 3/** 4 * HTMLドキュメント内の特定要素から最初の子要素を取得する例を示します。 5 * Dom\Element::firstElementChild プロパティは、親要素の最初の子要素ノード（テキストノードやコメントノードを除く）を返します。 6 * 子要素ノードが存在しない場合は null を返します。 7 */ 8function demonstrateFirstElementChild(): void 9{ 10 // 解析するHTML文字列を定義します。 11 // <div id="container"> の最初の子要素は <p> タグです。（<!-- コメント --> は要素ノードではないためスキップされます） 12 $htmlString = <<<HTML 13<!DOCTYPE html> 14<html> 15<head> 16 <title>firstElementChild Example</title> 17</head> 18<body> 19 <div id="container"> 20 <!-- これはコメントです --> 21 <p>これは最初の段落です。</p> 22 <span>これはスパン要素です。</span> 23 </div> 24 <div id="empty-container"> 25 これはテキストノードです。 26 <!-- このコンテナには要素の子がありません --> 27 </div> 28</body> 29</html> 30HTML; 31 32 // 1. 新しい DOMDocument オブジェクトを作成し、HTML文字列をロードします。 33 // DOMDocument はHTMLドキュメント全体をメモリ上で表現するためのオブジェクトです。 34 // @ エラー抑制演算子を使用しているのは、HTML解析時の潜在的な警告を抑制するためです。 35 $dom = new DOMDocument(); 36 @$dom->loadHTML($htmlString); 37 38 // 2. idが 'container' の要素を取得します。 39 // getElementById メソッドは、指定されたIDを持つ要素を DOMElement|null として返します。 40 // PHP 8では DOMElement が Dom\Element を継承しているため、Dom\Element として扱えます。 41 $parentElement = $dom->getElementById('container'); 42 43 // 3. 取得した要素が Dom\Element のインスタンスであることを確認します。 44 // 要素が見つからなかった場合 ($parentElement が null の場合) に備えます。 45 if ($parentElement instanceof Dom\Element) { 46 echo "--- 親要素 (id='container') の処理 ---\n"; 47 echo "親要素が見つかりました。\n"; 48 49 // 4. firstElementChild プロパティを使用して、親要素の最初の子要素を取得します。 50 // このプロパティは、子として最初に出現する Dom\Element オブジェクトを返します。 51 // コメントノードやテキストノードはスキップされ、要素ノードのみが対象となります。 52 $firstElementChild = $parentElement->firstElementChild; 53 54 if ($firstElementChild !== null) { 55 echo " => 最初の子要素が見つかりました。\n"; 56 echo " - タグ名: " . $firstElementChild->tagName . "\n"; 57 // テキスト内容を取得し、trim() で前後の空白（改行など）を除去して表示します。 58 echo " - テキスト内容: " . trim($firstElementChild->textContent) . "\n"; 59 } else { 60 echo " => 親要素 (id='container') には、要素の子ノードが存在しませんでした。\n"; 61 } 62 } else { 63 echo "--- 親要素 (id='container') の処理 ---\n"; 64 echo "id='container' の親要素が見つかりませんでした。\n"; 65 } 66 67 echo "\n"; 68 69 // 5. firstElementChild が null を返す場合の例を示します。 70 // idが 'empty-container' の要素は、テキストノードとコメントノードしか含んでいません。 71 $emptyContainer = $dom->getElementById('empty-container'); 72 if ($emptyContainer instanceof Dom\Element) { 73 echo "--- 親要素 (id='empty-container') の処理 ---\n"; 74 echo "親要素が見つかりました。\n"; 75 $firstEmptyChild = $emptyContainer->firstElementChild; 76 77 if ($firstEmptyChild === null) { 78 echo " => firstElementChild は null を返しました。\n"; 79 echo " (この要素には要素ノードの子が存在しないためです。\n"; 80 echo " テキストノードやコメントノードは firstElementChild の対象外です。)\n"; 81 } else { 82 echo " => 最初の子要素が見つかりました。\n"; 83 echo " - タグ名: " . $firstEmptyChild->tagName . "\n"; 84 echo " - テキスト内容: " . trim($firstEmptyChild->textContent) . "\n"; 85 } 86 } else { 87 echo "--- 親要素 (id='empty-container') の処理 ---\n"; 88 echo "id='empty-container' の親要素が見つかりませんでした。\n"; 89 } 90} 91 92// 関数を実行して、Dom\Element::firstElementChild の動作を確認します。 93demonstrateFirstElementChild(); 94 95?>
PHP 8のDom\Element::firstElementChildプロパティは、HTMLドキュメント内で特定の親要素の最初の子要素（要素ノード）を取得するために使用されます。このプロパティは引数を取らず、戻り値としてDom\Elementオブジェクト、または子要素が存在しない場合はnullを返します。
具体的には、HTML文字列をDOMDocumentオブジェクトとして読み込んだ後、特定のIDやタグ名を持つ要素をgetElementByIdなどのメソッドで取得します。この取得した要素がDom\Elementのインスタンスである場合、そのfirstElementChildプロパティにアクセスすることで、その親要素の直下にある最初の子要素を取得できます。ここでいう「子要素」とは、タグによって表現される要素ノードのみを指し、テキストノードやコメントノードは含まれません。これらはスキップされて、次に現れる要素ノードが最初の子要素として扱われます。
サンプルコードでは、まずHTMLドキュメントを読み込み、idが「container」の要素を取得しています。この要素のfirstElementChildプロパティを通じて、最初の子要素である<p>タグの情報を取得し、そのタグ名やテキスト内容を表示します。また、idが「empty-container」の要素のように、子要素ノードが全く存在しない場合にはfirstElementChildがnullを返す動作も示しており、要素の有無に応じた適切な処理の記述方法を学べます。
Dom\Element::firstElementChildプロパティは、親要素の最初の子要素ノード（タグで囲まれた部分）のみを返します。テキストノードやコメントノードは無視されるため注意が必要です。子要素ノードが存在しない場合はnullを返すため、必ずif ($firstElementChild !== null)のようにnullチェックを行い、安全に処理を進めてください。DOMDocument::loadHTML()でHTMLを読み込む際、不完全なHTMLなどにより警告が発生することがあります。サンプルでは@で抑制していますが、実運用では適切なエラーハンドリングを検討しましょう。また、取得したtextContentには不要な改行や空白が含まれる場合があるため、表示前にtrim()関数で整形すると見やすくなります。
Dom\Element::firstElementChildとfirstChildを比較する
1<?php 2 3/** 4 * Dom\Element::firstElementChild プロパティの動作を実演する関数です。 5 * firstChild プロパティとの比較を通じて、その違いを初心者にもわかりやすく説明します。 6 * 7 * PHP 8.1 以降では Dom\Element クラスが導入され、従来の DOMElement と相互運用可能です。 8 * このサンプルでは、モダンな Dom\Element を型ヒントに使用しています。 9 */ 10function demonstrateFirstElementChild(): void 11{ 12 // 1. DOMDocument オブジェクトを作成します。 13 // これは HTML や XML ドキュメントをパースし、DOM ツリーを構築するための基本オブジェクトです。 14 $dom = new DOMDocument(); 15 16 // 2. HTML 文字列をロードします。 17 // firstElementChild と firstChild の違いを明確に示すため、 18 // 最初の要素ノードの前にコメントノードとテキストノードを意図的に配置しています。 19 $html = <<<HTML 20<!DOCTYPE html> 21<html> 22<head> 23 <title>Dom\Element::firstElementChild Example</title> 24</head> 25<body> 26 <div id="myContainer"> 27 <!-- これは最初のコメントノードです --> 28 これは最初のテキストノードです。(改行や空白も含む) 29 <span>Hello, first element!</span> 30 <p>This is the second element.</p> 31 </div> 32</body> 33</html> 34HTML; 35 $dom->loadHTML($html); 36 37 // 3. 目的の Dom\Element を ID で取得します。 38 // DOMDocument::getElementById は DOMElement を返しますが、 39 // PHP 8.1 以降では Dom\Element と互換性があるため、型ヒントで Dom\Element を指定できます。 40 /** @var Dom\Element|null $containerElement */ 41 $containerElement = $dom->getElementById('myContainer'); 42 43 if ($containerElement === null) { 44 echo "エラー: ID 'myContainer' を持つ要素が見つかりませんでした。HTMLを確認してください。\n"; 45 return; 46 } 47 48 echo "--- 対象の親要素情報 ---\n"; 49 echo "要素名 (nodeName): " . $containerElement->nodeName . "\n"; 50 echo "ID属性: " . $containerElement->getAttribute('id') . "\n\n"; 51 52 // 4. Dom\Element::firstElementChild プロパティを使用します。 53 // このプロパティは、指定された要素の最初の子要素ノード (Dom\Element 型) のみを返します。 54 // テキストノードやコメントノードは無視されます。 55 echo "--- Dom\\Element::firstElementChild の使用 ---\n"; 56 /** @var Dom\Element|null $firstElementChild */ 57 $firstElementChild = $containerElement->firstElementChild; 58 59 if ($firstElementChild !== null) { 60 echo "firstElementChild は最初の子要素ノードを返しました。\n"; 61 echo " ノード名 (tagName): " . $firstElementChild->tagName . "\n"; 62 echo " ノードの種類: 要素ノード (DOM_ELEMENT_NODE)\n"; 63 echo " ノードの値 (textContent): '" . $firstElementChild->textContent . "'\n"; 64 } else { 65 echo "firstElementChild は null を返しました (子要素ノードが見つかりませんでした)。\n"; 66 } 67 echo "\n"; 68 69 // 5. Dom\Node::firstChild プロパティを使用します (比較のため)。 70 // このプロパティは、指定された要素の最初の子ノード (Dom\Node 型) を返します。 71 // 要素ノード、テキストノード、コメントノードなど、あらゆるノードタイプが含まれます。 72 echo "--- Dom\\Node::firstChild の使用 (firstElementChild との比較) ---\n"; 73 /** @var Dom\Node|null $firstChild */ 74 $firstChild = $containerElement->firstChild; 75 76 if ($firstChild !== null) { 77 echo "firstChild は最初の子ノードを返しました。\n"; 78 echo " ノード名: " . $firstChild->nodeName . "\n"; 79 echo " ノードの種類 (nodeType): " . $firstChild->nodeType; 80 switch ($firstChild->nodeType) { 81 case XML_ELEMENT_NODE: 82 echo " (要素ノード)\n"; 83 echo " ノード名 (tagName): " . $firstChild->tagName . "\n"; 84 echo " ノードの値 (nodeValue): null (要素ノードの nodeValue は通常 null です)\n"; 85 echo " ノードの値 (textContent): '" . $firstChild->textContent . "'\n"; 86 break; 87 case XML_TEXT_NODE: 88 echo " (テキストノード)\n"; 89 // テキストノードの値は、HTML ソースの改行や空白を含むことがあるため trim() して表示します。 90 echo " ノードの値 (nodeValue): '" . trim($firstChild->nodeValue) . "'\n"; 91 break; 92 case XML_COMMENT_NODE: 93 echo " (コメントノード)\n"; 94 echo " ノードの値 (nodeValue): '" . trim($firstChild->nodeValue) . "'\n"; 95 break; 96 default: 97 echo " (その他のノードタイプ)\n"; 98 echo " ノードの値 (nodeValue): '" . trim($firstChild->nodeValue) . "'\n"; 99 break; 100 } 101 } else { 102 echo "firstChild は null を返しました (子ノードが見つかりませんでした)。\n"; 103 } 104 echo "\n"; 105} 106 107// 上記の関数を実行して、Dom\Element::firstElementChild の動作を確認します。 108demonstrateFirstElementChild(); 109
PHP 8以降で利用可能なDom\Element::firstElementChildプロパティは、指定された親要素の直下にある最初の子要素ノードを取得するために使われます。このプロパティは引数を必要とせず、戻り値として最初に見つかったDom\Element型のオブジェクトを返します。もし親要素に子要素ノードが一つも存在しない場合はnullを返します。
このプロパティの最大の特徴は、取得する対象が「要素ノード」に限定される点です。Webページを構成する<div>や<span>といったHTMLタグが要素ノードにあたります。これに対して、よく比較されるDom\Node::firstChildプロパティは、要素ノードだけでなく、コメントノードやテキストノード（HTMLソース内の改行や空白なども含みます）も含めた、親要素の物理的な最初の子ノードを返します。
サンプルコードでは、コメントやテキストノードの後に<span>要素が配置されたdiv要素を使用しています。ここでfirstElementChildプロパティを使用すると、コメントやテキストノードを無視して、最初に見つかる<span>要素が返されます。一方、firstChildプロパティを使用すると、物理的に一番最初に現れるコメントノードが返されます。この違いを理解することで、DOMツリーの中から目的に合った要素を正確に特定し、操作できるようになります。
Dom\Element::firstElementChildプロパティは、要素の子ノードのうち、タグで構成される要素ノードのみを返します。コメントノードや空白を含むテキストノードは無視されるため、firstChildプロパティとは異なる結果となる点に特に注意が必要です。期待する子要素が見つからない場合はnullを返すため、必ず取得後のnullチェックを行ってください。HTMLソース中の改行やインデントによる空白もテキストノードとして扱われ、firstChildで取得される可能性があることも理解しておきましょう。このサンプルはPHP 8.1以降で導入されたDom\Elementクラスを使用しています。古いPHPバージョンではDOMElementクラスが使われるため、必要に応じて読み替えてください。