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

【PHP8.x】Dom\Element::closest()メソッドの使い方

closestメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

closestメソッドは、Dom\Elementクラスのインスタンスに対して、指定されたCSSセレクタに一致する最も近い祖先要素を検索するメソッドです。

このメソッドは、現在の要素自身は含まず、その親要素からHTMLやXML文書の階層構造(DOMツリー)をルート要素に向かって上位に遡りながら探索を行います。引数として、一つ以上の要素にマッチする有効なCSSセレクタ文字列(例えば、タグ名を示す'div'、クラス名を示す'.my-class'、IDを示す'#my-id'など)を一つ受け取ります。

検索の結果、指定されたセレクタに最初に一致する祖先要素が見つかった場合、その要素を表すDom\Elementオブジェクトを返します。もし、DOMツリーのルート要素に到達するまでに一致する祖先要素が一つも見つからなかった場合は、nullを返します。

この機能は、特にユーザーインターフェースにおけるイベント処理の場面で非常に便利です。例えば、リスト内の複数のボタンにイベントリスナーを設定する際、どのボタンがクリックされたかに関わらず、そのボタンを含む親のリストアイテム要素を特定したい場合に活用できます。子要素から直接目的の祖先要素を効率的に取得できるため、複雑なDOM構造を持つウェブページで特定の要素を簡単に特定し、コードの可読性と保守性を向上させるのに役立ちます。これにより、DOMの要素間を移動する複雑なロジックを簡潔に記述できます。

構文(syntax)

1<?php
2
3$dom = new DOMDocument();
4$element = $dom->createElement('span'); // Dom\Element クラスのインスタンスとして扱えます
5
6$selector = 'div.parent'; // 検索したいCSSセレクター(文字列)
7
8$closestElement = $element->closest($selector); // Dom\Element インスタンスまたは null が返されます
9
10?>

引数(parameters)

string $selectors

  • string $selectors: 指定されたCSSセレクタに一致する、現在の要素から最も近い祖先要素(または自分自身)を指定する文字列

戻り値(return)

?Dom\Element

指定された要素、もしくはそれより上位の要素で、指定されたCSSセレクターに一致する最初の親要素を返します。一致する要素が見つからない場合はnullを返します。

サンプルコード

Dom\Element::closest で祖先要素を検索する

1<?php
2
3/**
4 * 指定されたセレクタに一致する、最も近い祖先要素を返します。
5 *
6 * @param DOMElement $element 検索を開始する要素
7 * @param string $selectors CSS セレクタ文字列
8 * @return ?DOMElement 一致する最も近い祖先要素。見つからない場合は null。
9 */
10function findClosest(DOMElement $element, string $selectors): ?DOMElement
11{
12    $xpath = new DOMXPath($element->ownerDocument);
13
14    // セレクタを XPath 式に変換
15    $xpathQuery = "./ancestor::*[matches(name(), '" . str_replace(',', '|') . "')]";
16
17    $elements = $xpath->query($xpathQuery, $element);
18
19    if ($elements && $elements->length > 0) {
20        return $elements->item(0);
21    }
22
23    return null;
24}
25
26// サンプル: HTML を作成して要素を検索
27$html = <<<HTML
28<!DOCTYPE html>
29<html>
30<body>
31  <div id="container">
32    <div class="level1">
33      <div class="level2">
34        <p id="target">This is the target element.</p>
35      </div>
36    </div>
37  </div>
38</body>
39</html>
40HTML;
41
42$dom = new DOMDocument();
43$dom->loadHTML($html);
44
45$targetElement = $dom->getElementById('target');
46
47if ($targetElement) {
48    // 'level1' クラスを持つ最も近い祖先要素を検索
49    $closestElement = findClosest($targetElement, 'level1');
50
51    if ($closestElement) {
52        echo "Closest element with class 'level1': " . $closestElement->getAttribute('class') . PHP_EOL; // 出力: Closest element with class 'level1': level1
53    } else {
54        echo "No element found." . PHP_EOL;
55    }
56
57    // 'container' id を持つ最も近い祖先要素を検索
58    $closestElement = findClosest($targetElement, 'container');
59
60    if ($closestElement) {
61        echo "Closest element with id 'container': " . $closestElement->getAttribute('id') . PHP_EOL; // 出力: Closest element with id 'container': container
62    } else {
63        echo "No element found." . PHP_EOL;
64    }
65}
66?>

PHP 8 の Dom\Element クラスにおける closest メソッド(実際にはサンプルコードは自作関数 findClosest の例です)は、指定された CSS セレクタに一致する、要素の最も近い祖先要素を検索するために使用します。このメソッドは、システムエンジニアを目指す初心者の方にとって、DOM 構造内での要素の特定に役立ちます。

findClosest 関数は、検索を開始する DOMElement オブジェクトと、CSS セレクタ文字列を引数に取ります。セレクタ文字列は、検索する祖先要素の条件を指定します。関数は内部で DOMXPath を使用して、XPath クエリを実行し、セレクタに一致する祖先要素を検索します。

戻り値は、最初に一致した DOMElement オブジェクトです。一致する要素が見つからない場合は、null が返されます。

サンプルコードでは、HTML 文字列を DOMDocument オブジェクトにロードし、getElementById メソッドで特定の要素(id が "target" の要素)を取得しています。その後、findClosest 関数を使用して、level1 クラスを持つ最も近い祖先要素と、container id を持つ最も近い祖先要素を検索し、その結果をコンソールに出力しています。

この例では、findClosest 関数が、指定された要素から DOM ツリーを遡り、指定されたセレクタに合致する最も近い祖先要素を効率的に見つける方法を示しています。この手法は、複雑な HTML 構造内で特定の要素を特定し、操作する必要がある場合に非常に便利です。例えば、イベントが発生した要素の親要素の特定の属性を取得したり、特定のクラスを持つ親要素に基づいて処理を分岐させたりする際に利用できます。

DomElement::closestメソッド(PHP 8以降)の代替となるサンプルコードに関する注意点です。このコードは、XPathを使って祖先要素を検索しています。matches(name(), ...)関数を使用していますが、これは要素名を正規表現で比較します。セレクタ文字列をXPath式に変換する際に、,|に置換していますが、セレクタが複雑な場合はXPath式が正しく生成されない可能性があります。属性セレクタなど、より複雑なCSSセレクタには対応していません。セキュリティ上の観点から、$selectors変数を直接XPathクエリに埋め込むのは、XPathインジェクションのリスクがあるため避けるべきです。代わりに、XPathのquery()メソッドでパラメータを使用することを検討してください。このコードは、PHP 8未満の環境や、より複雑なセレクタに対応する必要がある場合に参考になります。

PHP 8 DOM Element::closest で祖先要素を検索する

1<?php
2
3/**
4 * Dom\Element::closest メソッドの使用方法をデモンストレーションします。
5 * このメソッドは、現在の要素から祖先を辿り、指定されたCSSセレクターに一致する最も近い祖先要素を検索します。
6 * PHP 8 の Dom 名前空間クラスを使用しています。
7 */
8function demonstrateDomElementClosest(): void
9{
10    // Dom\Document クラスのインスタンスを作成
11    $dom = new Dom\Document();
12
13    // デモンストレーション用のシンプルなHTML構造をロードします。
14    // loadHTML はドキュメント全体を解析するため、完全なHTML構造でなくても動作します。
15    $html = <<<HTML
16<div id="app">
17    <div class="card-container">
18        <div class="card primary">
19            <p>これはプライマリカードのテキストです。</p>
20            <button class="action-button" data-id="123">
21                <span class="icon">🔍</span>
22                <span class="label">詳細を見る</span>
23            </button>
24        </div>
25        <div class="card secondary">
26            <p>これはセカンダリカードのテキストです。</p>
27        </div>
28    </div>
29</div>
30HTML;
31    $dom->loadHTML($html);
32
33    // デモンストレーションの起点となる要素を取得します。
34    // 今回は '詳細を見る' というラベルを持つ span 要素を対象とします。
35    $targetElement = null;
36    $xpath = new DOMXPath($dom); // DOMXPath を使用して要素を検索
37    $nodes = $xpath->query("//span[@class='label' and text()='詳細を見る']");
38
39    if ($nodes->length > 0) {
40        // XPathクエリの結果は DOMNodeList です。
41        // PHP 8 の Dom\Element::closest は Dom\Element クラスのメソッドなので、
42        // DOMNode から Dom\Element にキャスト、または適切なタイプヒントを適用します。
43        // ここでは、DOMNodeList から DOMElement を取得し、それが Dom\Element のインスタンスであることを前提とします。
44        // 通常、DOM extension が Dom\Element を返すように設定されていれば問題ありません。
45        $targetElement = $nodes->item(0);
46    }
47
48    if ($targetElement instanceof Dom\Element) {
49        echo "現在の要素: <{$targetElement->tagName}> (テキスト: {$targetElement->textContent})\n";
50
51        // 1. 最も近い祖先の <button> 要素を検索
52        // セレクター: 'button'
53        $closestButton = $targetElement->closest('button');
54        if ($closestButton instanceof Dom\Element) {
55            echo "-> 最も近い 'button' 要素: <{$closestButton->tagName}> (data-id: {$closestButton->getAttribute('data-id')})\n";
56        } else {
57            echo "-> 最も近い 'button' 要素は見つかりませんでした。\n";
58        }
59
60        // 2. 最も近い祖先の '.card' クラスを持つ <div> 要素を検索
61        // セレクター: '.card'
62        $closestCard = $targetElement->closest('.card');
63        if ($closestCard instanceof Dom\Element) {
64            echo "-> 最も近い '.card' 要素: <{$closestCard->tagName}> (クラス: {$closestCard->getAttribute('class')})\n";
65        } else {
66            echo "-> 最も近い '.card' 要素は見つかりませんでした。\n";
67        }
68
69        // 3. 最も近い祖先の '#app' ID を持つ <div> 要素を検索
70        // セレクター: '#app'
71        $closestApp = $targetElement->closest('#app');
72        if ($closestApp instanceof Dom\Element) {
73            echo "-> 最も近い '#app' 要素: <{$closestApp->tagName}> (ID: {$closestApp->getAttribute('id')})\n";
74        } else {
75            echo "-> 最も近い '#app' 要素は見つかりませんでした。\n";
76        }
77
78        // 4. 存在しないセレクターで検索
79        // セレクター: 'body' (このHTMLフラグメントには存在しない)
80        $closestBody = $targetElement->closest('body');
81        if ($closestBody instanceof Dom\Element) {
82            echo "-> 最も近い 'body' 要素: <{$closestBody->tagName}>\n";
83        } else {
84            echo "-> 最も近い 'body' 要素は見つかりませんでした (null が返されます)。\n";
85        }
86
87    } else {
88        echo "対象要素が見つかりませんでした。\n";
89    }
90}
91
92// デモンストレーション関数を実行
93demonstrateDomElementClosest();

PHP 8のDom\Element::closestメソッドは、HTML/XMLドキュメントを操作する際に、現在の要素から親要素を辿っていき、指定されたCSSセレクターに一致する最も近い祖先要素を検索する機能を提供します。

引数string $selectorsには、検索したい祖先要素を指定するためのCSSセレクターを文字列で渡します。例えば、'button'でボタン要素、'.card'cardクラスを持つ要素、'#app'appIDを持つ要素などを指定できます。戻り値は?Dom\Element型で、条件に一致する祖先要素が見つかった場合はそのDom\Elementのインスタンスを返します。一致する要素が見つからなかった場合はnullを返します。

サンプルコードでは、「詳細を見る」というテキストを持つspan要素を起点とし、そこから祖先要素を検索しています。具体的には、最も近いbutton要素、.cardクラスを持つdiv要素、そして#appIDを持つdiv要素を順に検索し、それぞれの要素が見つかった場合にはその情報を出力しています。存在しないセレクター(例: body)で検索を試みた際にはnullが返されることも確認できます。このメソッドは、特定の要素から親方向へ効率的に探索し、関連する上位要素を見つけたい場合に非常に有効です。

Dom\Element::closestメソッドは、PHP 8で導入された新しいDOM拡張の機能です。従来のDOMElementとは異なるため、DOMXPathなどで取得した要素をこのメソッドで利用する際は、必ずそれがDom\Element型であることを確認してください。サンプルコードのように$targetElement instanceof Dom\Elementでチェックするのが安全です。

このメソッドは、指定したCSSセレクターに一致する最も近い祖先要素を返しますが、一致する要素が見つからない場合はnullを返します。そのため、メソッド呼び出し後は常にinstanceof Dom\Elementなどを使って戻り値が有効な要素かnullかを判断し、適切なエラーハンドリングや分岐処理を行うことが非常に重要です。引数には一般的なCSSセレクター(タグ名、.クラス名#IDなど)を指定できます。検索は現在の要素の祖先のみが対象となります。

PHP DOM closestround で要素と数値を扱う

1<?php
2
3/**
4 * HTML文字列からDOMを構築し、Dom\Element::closest メソッドを使って要素を探索し、
5 * 見つかった要素の属性値(数値)を最も近い整数に丸めるサンプルです。
6 *
7 * システムエンジニアを目指す初心者の方にも理解しやすいよう、
8 * PHP 8で導入された新しいDom拡張 (`ext-dom` の `Dom\` 名前空間のクラス) の利用と、
9 * 数値の丸め処理 (`round` 関数) の両方を示しています。
10 *
11 * このコードを実行するには、PHPの実行環境で Dom拡張が有効になっている必要があります。
12 */
13function demonstrateDomClosestAndRounding(): void
14{
15    // 処理対象となるHTML構造を文字列として定義します。
16    // データ属性 (data-*) には浮動小数点数の値を含めています。
17    $htmlContent = '
18    <div id="container-main" data-version="1.5">
19        <ul class="item-list">
20            <li class="item" data-price="99.75">
21                <span class="product-name">Widget A</span>
22                <button class="buy-button" data-quantity="2.3">Buy</button>
23            </li>
24            <li class="item" data-price="120.2">
25                <span class="product-name">Widget B</span>
26                <button class="buy-button" data-quantity="1.8">Add to Cart</button>
27            </li>
28        </ul>
29    </div>';
30
31    // Dom\HTMLDocument オブジェクトを作成します。
32    // これはHTMLドキュメントを扱うための新しいDOMクラスです。
33    $domDocument = new Dom\HTMLDocument();
34    // 定義したHTML文字列をパース(解析)して、DOMツリーを構築します。
35    $domDocument->parse($htmlContent);
36
37    // CSSセレクタ '.buy-button' を使って、最初の該当要素(購入ボタン)を探します。
38    // Dom\HTMLDocument::querySelector は、指定されたセレクタに一致する最初の Dom\Element オブジェクトを返します。
39    $targetElement = $domDocument->querySelector('.buy-button');
40
41    if ($targetElement) {
42        echo "--- ターゲット要素が見つかりました ---\n";
43        echo "タグ名: " . $targetElement->tagName . "\n";
44        // ターゲット要素自身の 'data-quantity' 属性値を取得します。
45        $dataQuantityStr = $targetElement->getAttribute('data-quantity');
46        echo "data-quantity (生の値): " . $dataQuantityStr . "\n\n";
47
48        // Dom\Element::closest メソッドの使用例です。
49        // 現在の要素 ($targetElement) から親要素をたどって遡り、
50        // CSSセレクタ '.item' に一致する最も近い祖先要素を探します。
51        // closest メソッドは、見つかった Dom\Element オブジェクト(または見つからない場合は null)を返します。
52        $closestItem = $targetElement->closest('.item');
53
54        if ($closestItem) {
55            echo "--- 最も近い親要素 (.item) が見つかりました ---\n";
56            echo "タグ名: " . $closestItem->tagName . "\n";
57            // 見つかった親要素の 'data-price' 属性値を取得します。
58            $dataPriceStr = $closestItem->getAttribute('data-price');
59            echo "data-price (生の値): " . $dataPriceStr . "\n\n";
60
61            // 「php round to closest integer」のキーワードに関連する処理です。
62            // 取得した 'data-price' 属性値が数値であれば、最も近い整数に丸めます。
63            if (!empty($dataPriceStr) && is_numeric($dataPriceStr)) {
64                $price = (float)$dataPriceStr; // 文字列を浮動小数点数に変換
65                $roundedPrice = round($price);  // PHPのround関数で最も近い整数に丸める
66                echo "元の価格 (浮動小数点数): {$price}\n";
67                echo "丸められた価格 (最も近い整数): {$roundedPrice}\n\n";
68            } else {
69                echo "最も近い親要素には数値の 'data-price' 属性が見つかりませんでした。\n\n";
70            }
71        } else {
72            echo "クラス名が 'item' の最も近い親要素は見つかりませんでした。\n\n";
73        }
74
75        // さらに上位の祖先要素 (例: IDが 'container-main' の要素) も探してみます。
76        $closestContainer = $targetElement->closest('#container-main');
77        if ($closestContainer) {
78            echo "--- 最も近い祖先要素 (#container-main) が見つかりました ---\n";
79            echo "タグ名: " . $closestContainer->tagName . "\n";
80            // 見つかった祖先要素の 'data-version' 属性値を取得します。
81            $dataVersionStr = $closestContainer->getAttribute('data-version');
82            echo "data-version (生の値): " . $dataVersionStr . "\n\n";
83
84            if (!empty($dataVersionStr) && is_numeric($dataVersionStr)) {
85                $version = (float)$dataVersionStr;
86                $roundedVersion = round($version); // ここでもround関数を使用
87                echo "元のバージョン (浮動小数点数): {$version}\n";
88                echo "丸められたバージョン (最も近い整数): {$roundedVersion}\n\n";
89            } else {
90                echo "最も近い祖先要素には数値の 'data-version' 属性が見つかりませんでした。\n\n";
91            }
92        } else {
93            echo "IDが 'container-main' の最も近い祖先要素は見つかりませんでした。\n\n";
94        }
95
96        // ターゲット要素自身の 'data-quantity' 属性値も丸めてみます。
97        if (!empty($dataQuantityStr) && is_numeric($dataQuantityStr)) {
98            $quantity = (float)$dataQuantityStr;
99            $roundedQuantity = round($quantity);
100            echo "ターゲット要素の元の数量 (浮動小数点数): {$quantity}\n";
101            echo "ターゲット要素の丸められた数量 (最も近い整数): {$roundedQuantity}\n\n";
102        }
103
104    } else {
105        echo "HTML内にターゲットとなるボタン要素が見つかりませんでした。\n";
106    }
107}
108
109// 定義した関数を実行して、サンプルコードの動作を確認します。
110demonstrateDomClosestAndRounding();

このサンプルコードは、PHP 8で導入された新しいDom拡張を活用し、HTMLドキュメント内の要素を効率的に探索し、取得した数値データを最も近い整数に丸める方法を示しています。

まず、HTML文字列からDom\HTMLDocumentオブジェクトを生成し、DOMツリーを構築します。その後、Dom\HTMLDocument::querySelectorを用いて特定の要素を初期のターゲットとして取得します。

次に、取得したターゲット要素からDom\Element::closestメソッドを利用します。このメソッドは、現在の要素から親要素を遡り、引数string $selectorsで指定されたCSSセレクタに最初に一致する最も近い祖先要素を探索します。一致する要素が見つかればDom\Elementオブジェクトを、見つからない場合はnullを戻り値として返します。サンプルでは、購入ボタンから.itemクラスを持つ親要素や、さらに上位の#container-mainというIDを持つ祖先要素を探索する具体例を示しています。

要素が見つかった際には、その要素のdata-*属性値から数値を抽出し、PHPの組み込み関数roundを用いて最も近い整数に丸める処理を行っています。これにより、HTMLから取得したデータを適切に加工する方法を学べます。

このコードは、Webページから特定の情報を取得し、数値計算を行う一連の流れをシステムエンジニアを目指す初心者にも分かりやすく解説しています。実行にはPHPのDom拡張が有効である必要があります。

このコードは、PHP 8で導入された新しいDom拡張(Dom\ 名前空間のクラス群)を利用しています。実行には、PHPの実行環境でDom拡張が有効になっている必要があります。Dom\Element::closestメソッドは、現在の要素から親要素を遡り、指定されたCSSセレクタに合致する最も近い祖先要素を探します。要素が見つからない場合はnullを返すため、必ず戻り値のチェックを行い、見つからなかった場合の処理を考慮することが重要です。また、HTML要素の属性値は常に文字列として取得されます。そのため、round関数で数値を最も近い整数に丸める前に、is_numericで数値として有効かを確認し、(float)などで明示的に数値型へ変換してから計算するようにしてください。これにより、予期せぬエラーを防ぎ、安全かつ正確な処理を実現できます。

関連コンテンツ

関連プログラミング言語