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

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

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

作成日: 更新日:

基本的な使い方

closestメソッドは、Dom\HTMLElementクラスに属し、現在のHTML要素からDOMツリーを上方向にたどり、指定されたセレクタに一致する最も近い祖先要素を検索して取得するメソッドです。

このメソッドは、引数としてCSSセレクタ文字列を一つ受け取ります。例えば、.my-classdiv, #my-idのようなセレクタを指定できます。現在の要素から親要素、さらにその親要素へと順に遡りながら、指定されたセレクタに合致する最初の要素を見つけると、その要素をDom\Elementオブジェクトとして返します。もし、DOMツリーのルートに到達しても指定されたセレクタに一致する祖先要素が見つからない場合は、nullを返します。

closestメソッドは、複雑なHTML構造の中で特定の親要素を効率的に見つけ出す際に非常に役立ちます。例えば、あるボタンがクリックされたときに、そのボタンを含む特定のクラス名を持つdiv要素全体に対して何か操作を行いたい場合などに利用できます。イベントが発生した要素から、イベントハンドラを割り当てたい対象の親要素を簡単に見つけ出すことが可能です。これにより、DOMツリー全体を巡回する複雑なロジックを自分で書く手間が省け、コードの可読性と保守性が向上します。PHPでWebページのDOM構造を操作する際に、開発者がより直感的かつ効率的に要素間の関係性を処理できるようサポートします。

構文(syntax)

1<?php
2
3$html = '<div class="ancestor"><p><span class="target"></span></p></div>';
4$document = new Dom\Document();
5$document->loadHTML($html);
6
7// Dom\HTMLElement のインスタンスを取得します
8$targetElement = $document->querySelector('span.target');
9
10// closest メソッドを呼び出し、指定されたセレクタに一致する最も近い祖先要素を検索します
11$closestAncestor = $targetElement->closest('div.ancestor');
12
13?>

引数(parameters)

string $selectors

  • string $selectors: 指定するCSSセレクター文字列

戻り値(return)

?Dom\Element

指定された要素、またはその親要素の中から、条件に一致する最も近い祖先要素を返します。一致する要素が見つからなかった場合は null を返します。

サンプルコード

PHP DOM: closestメソッドで祖先要素を検索

1<?php
2
3namespace App;
4
5use Dom\Document;
6use Dom\HTMLElement;
7use Dom\Element;
8
9/**
10 * HTML構造内で指定された要素の最も近い祖先要素または自身を検索します。
11 *
12 * この関数は、Dom\HTMLElement::closest() メソッドの利用方法をデモンストレーションします。
13 * 指定されたCSSセレクタに一致する最も近い親要素(または自身)を見つけるために使用されます。
14 *
15 * @param string $htmlContent 検索対象となるHTMLコンテンツ。
16 * @param string $targetId 検索を開始する要素のID。
17 * @param string $selector 検索する祖先要素のCSSセレクタ(例: 'div', '.container', 'section#main')。
18 * @return ?Element 指定されたセレクタに一致する最も近い祖先要素または自身、見つからない場合はnull。
19 */
20function findClosestDomElement(string $htmlContent, string $targetId, string $selector): ?Element
21{
22    // 新しいDOMドキュメントを作成します。
23    $document = new Document();
24
25    // HTMLコンテンツをドキュメントに読み込みます。
26    // エラーが発生する可能性があるため、@ を使って警告を抑制していますが、
27    // 実運用では適切なエラーハンドリングが必要です。
28    @$document->loadHTML($htmlContent);
29
30    // 検索を開始する要素をIDで取得します。
31    $targetElement = $document->getElementById($targetId);
32
33    // 対象要素が見つからない、またはHTMLElementでない場合は処理を終了します。
34    if (!$targetElement instanceof HTMLElement) {
35        echo "エラー: 指定されたID '{$targetId}' の要素が見つからないか、HTMLElementではありません。\n";
36        return null;
37    }
38
39    echo "対象要素: <{$targetElement->tagName} id=\"{$targetId}\">\n";
40    echo "検索セレクタ: '{$selector}'\n";
41
42    // Dom\HTMLElement::closest() メソッドを使用して、
43    // 指定されたセレクタに一致する最も近い祖先要素または自身を検索します。
44    // このメソッドは、対象要素から親方向へDOMツリーを遡り、最初に見つかった一致要素を返します。
45    $closestElement = $targetElement->closest($selector);
46
47    if ($closestElement) {
48        echo "見つかった要素: <{$closestElement->tagName}> (クラス: {$closestElement->getAttribute('class')}, ID: {$closestElement->getAttribute('id')})\n";
49    } else {
50        echo "セレクタ '{$selector}' に一致する最も近い要素は見つかりませんでした。\n";
51    }
52
53    return $closestElement;
54}
55
56// --- サンプルコードの実行例 ---
57
58// 簡単なHTML構造を定義します。
59$html = <<<HTML
60<!DOCTYPE html>
61<html>
62<head>
63    <title>PHP closest メソッドサンプル</title>
64</head>
65<body>
66    <div class="wrapper" id="wrapperDiv">
67        <section class="main-section">
68            <article class="card-item">
69                <span id="myTargetSpan" class="data-label">
70                    重要なデータ
71                </span>
72            </article>
73        </section>
74        <p>別のコンテンツ</p>
75    </div>
76    <footer id="footer">フッター</footer>
77</body>
78</html>
79HTML;
80
81echo "--- 実行例 1: 直近の 'article' 要素を検索 ---\n";
82// 'myTargetSpan' の直近の 'article' 祖先要素を検索します。
83$result1 = findClosestDomElement($html, 'myTargetSpan', 'article');
84echo "----------------------------------------\n\n";
85
86echo "--- 実行例 2: クラス名を持つ 'div' 要素を検索 ---\n";
87// 'myTargetSpan' から最も近いクラスが 'wrapper' の 'div' 要素を検索します。
88$result2 = findClosestDomElement($html, 'myTargetSpan', 'div.wrapper');
89echo "----------------------------------------\n\n";
90
91echo "--- 実行例 3: 存在しない祖先要素を検索 ---\n";
92// 'myTargetSpan' の祖先ではない 'footer' 要素を検索します。
93$result3 = findClosestDomElement($html, 'myTargetSpan', 'footer');
94echo "----------------------------------------\n\n";
95
96echo "--- 実行例 4: 自身がセレクタに一致する場合 ---\n";
97// 'myTargetSpan' 自身が 'span' なので、自身が返されます。
98$result4 = findClosestDomElement($html, 'myTargetSpan', 'span');
99echo "----------------------------------------\n\n";
100
101?>

PHPのDom\HTMLElement::closest()メソッドは、HTML要素のDOMツリー内で、自身またはその祖先要素の中から、特定のCSSセレクタに一致する最も近い要素を効率的に検索するための機能です。このメソッドは、指定された要素からDOMツリーを親方向へ遡り、引数であるstring $selectorsに合致する最初の要素を見つけ出し、それをDom\Elementオブジェクトとして返します。もし一致する要素が見つからない場合は、nullを返します。

このサンプルコードでは、まず与えられたHTMLコンテンツをDom\Documentに読み込み、特定のIDを持つ要素(例: myTargetSpan)を起点として取得します。その後、その取得した要素に対してclosest()メソッドを呼び出し、様々なCSSセレクタを使って祖先要素の検索を行っています。例えば、'article'を指定すれば最も近いarticle要素を、'div.wrapper'を指定すればクラス名がwrapperdiv要素を検索します。また、自身がセレクタに一致する場合(例: 'span'myTargetSpanを検索)も、自身が結果として返されることが確認できます。このように、closest()メソッドを使用することで、複雑なHTML構造の中から目的の親要素や自身を簡潔かつ正確に特定することが可能になります。

このサンプルコードは、HTMLのDOMツリー内で指定要素の最も近い祖先要素または自身を、CSSセレクタを用いて検索するDom\HTMLElement::closest()メソッドの利用法です。提示された「php closest number in array」というキーワードとは異なり、DOM要素の検索に特化しています。closest()メソッドは、対象要素自身と、その親方向へDOMツリーを遡り、最初に一致した要素を返します。子要素や兄弟要素は検索対象外ですので注意が必要です。引数には有効なCSSセレクタ文字列を指定してください。サンプルではエラー抑制を使用していますが、実運用ではloadHTMLなどのエラーを適切にハンドリングし、堅牢性を確保することが重要です。この機能はPHPのDOM拡張が有効である必要があります。

関連コンテンツ

関連プログラミング言語

【PHP8.x】Dom\HTMLElement::closest()メソッドの使い方 | いっしー@Webエンジニア