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

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

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

作成日: 更新日:

基本的な使い方

querySelectorメソッドは、WebページなどのDOM(Document Object Model)構造の中から、指定したCSSセレクターに合致する最初の要素を検索し、取得するメソッドです。

このメソッドは、PHPのDOM拡張機能において、HTMLやXMLドキュメント内の個々の要素を表すDom\Elementクラスに属しています。ウェブページの構造をプログラムで操作する際に、特定の要素を見つけ出すために使用されます。

引数には、検索したい要素を指定するための文字列(CSSセレクター)を渡します。例えば、特定のIDを持つ要素を検索する場合は「#myId」、特定のクラスを持つ要素を検索する場合は「.myClass」、特定のタグ名の要素を検索する場合は「div」といった形式で指定します。複雑なセレクター(例: div.container > p)も利用可能です。

検索に成功した場合、合致した最初の要素を表すDom\Elementオブジェクトが返されます。もし、指定されたセレクターに合致する要素がドキュメント内に見つからなかった場合は、nullが返されます。このメソッドは、たとえ複数の要素がセレクターに合致しても、最初に見つかった1つだけを返す点に注意が必要です。

このメソッドを使用することで、Webページから特定のボタンや入力欄、表示領域などを効率的に見つけ出し、その内容を読み取ったり、属性を変更したり、イベントを操作したりするプログラミングが可能になります。WebスクレイピングやDOM操作を伴うWebアプリケーション開発において非常に重要な役割を果たします。

構文(syntax)

1<?php
2
3$dom = new Dom\Document();
4$dom->loadHTML('<div id="container"><p class="item">Example Text</p></div>');
5
6// Dom\DocumentからDom\Elementのインスタンスを取得
7$containerElement = $dom->getElementById('container');
8
9// Dom\Element::querySelector メソッドの構文
10if ($containerElement instanceof Dom\Element) {
11    $firstItem = $containerElement->querySelector('.item');
12}
13
14?>

引数(parameters)

string $selectors

  • string $selectors: DOM要素を検索するためのCSSセレクタ文字列

戻り値(return)

?Dom\Element

DOMDocumentの要素の中から、指定されたCSSセレクタに一致する最初の要素、または見つからなかった場合はnullを返します。

サンプルコード

PHP DOMDocument querySelectorで要素を取得する

1<?php
2
3// HTML文字列を定義します。
4$html = <<<HTML
5<!DOCTYPE html>
6<html>
7<head>
8    <title>querySelector Example</title>
9</head>
10<body>
11    <div id="container">
12        <p class="item">Item 1</p>
13        <p class="item">Item 2</p>
14        <p>Item 3</p>
15    </div>
16</body>
17</html>
18HTML;
19
20// DOMDocumentオブジェクトを作成します。
21$dom = new DOMDocument();
22
23// HTMLをロードします。
24$dom->loadHTML($html);
25
26// querySelectorを使って、最初のクラス "item" を持つ要素を取得します。
27$element = $dom->querySelector('.item');
28
29// 要素が見つかったかどうかを確認します。
30if ($element) {
31    // 要素の内容を出力します。
32    echo "Found element: " . $element->textContent . PHP_EOL;
33} else {
34    echo "Element not found." . PHP_EOL;
35}
36
37// querySelectorAllを使って、すべてのクラス "item" を持つ要素を取得します。
38$elements = $dom->querySelectorAll('.item');
39
40// 取得した要素をループ処理します。
41foreach ($elements as $element) {
42    echo "Found element (querySelectorAll): " . $element->textContent . PHP_EOL;
43}
44
45?>

このPHPのサンプルコードは、DOMDocumentオブジェクトを使用してHTMLドキュメントを解析し、querySelectorメソッドを使って特定の要素を選択する方法を示しています。querySelectorメソッドは、CSSセレクタに基づいて、ドキュメント内で最初に一致する要素をDom\Elementオブジェクトとして返します。もし一致する要素が見つからない場合は、nullを返します。引数$selectorsには、検索に使用するCSSセレクタ文字列を指定します。

サンプルコードでは、まずHTML文字列を定義し、それをDOMDocumentオブジェクトにロードします。次に、querySelector('.item')を使用して、クラス名が"item"である最初の要素を取得しています。要素が見つかった場合は、その内容(textContent)を出力します。

さらに、querySelectorAll('.item')メソッドを使用して、クラス名が"item"であるすべての要素をNodeListとして取得し、foreachループで各要素の内容を出力しています。querySelectorAllメソッドは、一致する要素がなくても空のNodeListを返します。

このコードは、HTMLドキュメントから特定の要素を効率的に抽出するための基本的な手法を示しており、WebスクレイピングやHTMLの構造を操作する際に役立ちます。querySelectorquerySelectorAllを適切に使い分けることで、必要な要素を的確に取得し、処理することが可能です。

querySelectorは、指定したCSSセレクタに最初にマッチする要素を返します。もし該当する要素がない場合はnullを返すことに注意してください。要素が見つかったかどうかをif文で確認することを推奨します。

querySelectorAllは、マッチするすべての要素をDOMNodeListとして返します。要素が存在しない場合でも空のDOMNodeListが返され、nullにはなりません。そのため、foreachなどでループ処理を行う前に、DOMNodeListが空でないかを確認する必要はありません。

HTMLをロードする際、文字コードの問題で文字化けが発生することがあります。$dom->loadHTML('<?xml encoding="UTF-8">' . $html);のように、XML宣言で文字コードを指定することで、文字化けを回避できる場合があります。

PHP: querySelectorAllで要素を検索する

1<?php
2
3/**
4 * HTML文字列からCSSセレクタにマッチする複数の要素を検索し、情報を表示する関数。
5 * システムエンジニアを目指す初心者向けに、Dom\Element::querySelectorAll の使い方を示す。
6 */
7function demonstrateQuerySelectorAll(): void
8{
9    // 検索対象となるHTMLコンテンツを定義
10    $htmlContent = <<<HTML
11<!DOCTYPE html>
12<html>
13<head>
14    <title>Query Selector All Example</title>
15</head>
16<body>
17    <h1>要素の検索例</h1>
18    <div id="main-content">
19        <p class="data-item first">データアイテム 1</p>
20        <p class="data-item">データアイテム 2</p>
21        <span class="data-item last">データアイテム 3</span>
22    </div>
23    <div class="another-section">
24        <p>関連しない段落</p>
25    </div>
26</body>
27</html>
28HTML;
29
30    // Dom\Documentを初期化し、HTMLコンテンツを読み込む
31    $dom = new Dom\Document();
32    // HTMLパース時の警告を抑制(実運用では適切なエラーハンドリングを推奨)
33    @$dom->loadHTML($htmlContent);
34
35    // ドキュメントのbody要素を取得し、Dom\Elementとして扱う。
36    // Dom\Element::querySelectorAll は Dom\Element インスタンスから呼び出す。
37    $bodyElement = $dom->querySelector('body');
38
39    // body要素が正常に取得できたかを確認
40    if ($bodyElement instanceof Dom\Element) {
41        echo "--- CSSセレクタ '.data-item' にマッチする全ての要素を検索 ---\n";
42
43        // body要素から、CSSセレクタ '.data-item' にマッチする全ての要素を取得する
44        // Dom\Element::querySelectorAll は Dom\NodeList オブジェクトを返す
45        $elements = $bodyElement->querySelectorAll('.data-item');
46
47        // 取得した要素リストを繰り返し処理し、各要素の情報を表示
48        if ($elements->count() > 0) {
49            foreach ($elements as $index => $element) {
50                // Dom\NodeList の各要素は Dom\Element のインスタンス
51                if ($element instanceof Dom\Element) {
52                    echo "要素 #" . ($index + 1) . ":\n";
53                    echo "  タグ名: " . $element->tagName . "\n";
54                    echo "  textContent: " . $element->textContent . "\n";
55                    echo "  クラス属性: " . $element->getAttribute('class') . "\n";
56                    echo "----------------------------------\n";
57                }
58            }
59        } else {
60            echo "指定されたCSSセレクタに一致する要素は見つかりませんでした。\n";
61        }
62    } else {
63        echo "HTMLドキュメントからbody要素を取得できませんでした。\n";
64    }
65}
66
67// 関数を実行してサンプルコードの動作を確認
68demonstrateQuerySelectorAll();

Dom\Element::querySelector()メソッドは、PHP 8以降で使用できる、DOM要素内で指定されたCSSセレクタに最初にマッチする要素を検索するメソッドです。引数$selectorsには、検索に使用するCSSセレクタを文字列で指定します。このメソッドは、最初にマッチしたDom\Elementオブジェクトを返します。もし、マッチする要素が見つからない場合はnullを返します。

サンプルコードでは、まずDom\Documentオブジェクトを作成し、HTMLコンテンツを読み込んでいます。次に、querySelector('body')を使用してbody要素を取得し、取得したbody要素に対してquerySelectorAll('.data-item')を呼び出しています。これにより、body要素以下にあるclass属性がdata-itemであるすべての要素を検索しています。

querySelectorAll()メソッドは、マッチした要素のDom\NodeListを返します。サンプルコードでは、返されたDom\NodeListをループ処理し、各要素のタグ名、テキストコンテンツ、class属性を表示しています。Dom\NodeListは、コレクションのように扱えるオブジェクトで、count()メソッドで要素数を確認できます。要素が存在しない場合は、該当する要素が見つからなかった旨のメッセージが表示されます。このメソッドを使うことで、特定の条件に合致する要素を効率的に取得し、操作することができます。

Dom\Element::querySelectorAll()は、指定したCSSセレクタに一致する要素をすべて探し、Dom\NodeListとして返します。セレクタに一致する要素がない場合は空のDom\NodeListが返ります。Dom\NodeListは配列のように扱えますが、正確には配列ではありません。count()メソッドで要素数を確認できます。

サンプルコードでは@$dom->loadHTML($htmlContent)でエラーを抑制していますが、実運用ではエラーハンドリングを必ず行ってください。$bodyElement instanceof Dom\Elementのように、取得した要素が実際にDom\Elementのインスタンスであるか確認することで、予期せぬエラーを防ぐことができます。querySelector()は最初に見つかった要素のみを返すのに対し、querySelectorAll()は条件に一致するすべての要素を返すという違いに注意してください。

関連コンテンツ

関連プログラミング言語

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