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

【PHP8.x】Dom\HTMLElement::classListプロパティの使い方

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

作成日: 更新日:

基本的な使い方

classListプロパティは、DOM要素のクラス属性(class attribute)を操作するためのDOMTokenListオブジェクトを保持するプロパティです。Dom\HTMLElementクラスに属し、PHPのDOM拡張モジュールで使用されます。

具体的には、HTML要素のclass属性に設定されているクラス名の一覧を、DOMTokenListオブジェクトとして取得・変更するために利用します。DOMTokenListオブジェクトは、スペースで区切られたクラス名の集合を配列のように扱える便利なインターフェースを提供します。

classListプロパティを使用することで、要素に特定のクラスを追加したり、削除したり、存在を確認したりといった操作を簡単に行うことができます。例えば、要素に特定のスタイルを適用するためにクラスを追加したり、ある条件に応じてクラスを切り替えたりする場合に有効です。

このプロパティは読み取り専用であり、直接新しいDOMTokenListオブジェクトを割り当てることはできません。classListプロパティを通じて取得したDOMTokenListオブジェクトのメソッド(add、remove、toggle、containsなど)を使用して、クラスリストを操作します。

Dom\HTMLElementオブジェクトのclassListプロパティにアクセスすることで、対応するHTML要素のクラス属性をプログラムから動的に操作し、Webページの表示や動作を制御できます。JavaScriptにおけるclassListプロパティと同様の機能を提供し、PHPでサーバーサイドのHTML処理を行う際に役立ちます。

構文(syntax)

1<?php
2
3$element = new Dom\HTMLElement();
4$classList = $element->classList;
5
6?>

引数(parameters)

引数なし

引数はありません

戻り値(return)

DOMTokenList

Dom\HTMLElement クラスの classList プロパティは、要素に適用されている CSS クラスのリストを管理するための DOMTokenList オブジェクトを返します。このオブジェクトを通じて、クラスの追加、削除、切り替え、および存在確認を行うことができます。

サンプルコード

PHPでHTML要素のclassListを操作する

1<?php
2
3// HTML 要素の classList プロパティの利用例
4$dom = new DOMDocument();
5$dom->loadHTML('<!DOCTYPE html><html><body><p id="myParagraph" class="foo bar"></p></body></html>');
6
7// id が myParagraph の要素を取得
8$element = $dom->getElementById('myParagraph');
9
10// classList プロパティを取得
11if ($element) {
12    $classList = $element->classList;
13
14    // クラスの数を表示
15    echo "クラスの数: " . $classList->length . PHP_EOL; // 出力: クラスの数: 2
16
17    // 特定のクラスが存在するか確認
18    if ($classList->contains('foo')) {
19        echo "クラス 'foo' は存在します。" . PHP_EOL; // 出力: クラス 'foo' は存在します。
20    }
21
22    // 新しいクラスを追加
23    $classList->add('baz');
24    echo "クラス 'baz' を追加しました。" . PHP_EOL;
25
26    // クラス 'bar' を削除
27    $classList->remove('bar');
28    echo "クラス 'bar' を削除しました。" . PHP_EOL;
29
30    // 更新された class 属性を表示(文字列として)
31    echo "更新されたクラス属性: " . $element->getAttribute('class') . PHP_EOL; // 出力: 更新されたクラス属性: foo baz
32
33    // すべてのクラスをループで表示
34    echo "クラス一覧:" . PHP_EOL;
35    foreach ($classList as $class) {
36        echo "- " . $class . PHP_EOL;
37    }
38} else {
39    echo "要素が見つかりませんでした。" . PHP_EOL;
40}
41
42?>

このサンプルコードは、PHPのDom\HTMLElementクラスにおけるclassListプロパティの使い方を示しています。classListは、HTML要素のclass属性を操作するための便利なプロパティで、DOMTokenListオブジェクトを返します。

まず、DOMDocumentオブジェクトを作成し、HTML文字列を読み込んでいます。次に、getElementByIdメソッドを使って、id属性がmyParagraphであるHTML要素を取得します。

要素が見つかった場合、classListプロパティにアクセスします。classListは、要素が持つクラスのリストを管理するためのオブジェクトです。lengthプロパティでクラスの数を調べたり、containsメソッドで特定のクラスが存在するかどうかを確認したりできます。

addメソッドを使用すると、新しいクラスを要素に追加できます。removeメソッドを使うと、既存のクラスを要素から削除できます。これらの操作後、getAttribute('class')で要素のclass属性の値を取得することで、変更を確認できます。

classListはイテレータとしても機能するため、foreachループを使用して、要素が持つすべてのクラスを順番に処理することも可能です。このサンプルコードでは、それぞれのクラス名をコンソールに出力しています。

この例を通じて、classListプロパティを利用することで、PHPからHTML要素のクラス属性を動的に操作し、ウェブページのスタイルや動作を制御できることが理解できます。

DOMElementclassListプロパティは、HTML要素のclass属性を操作するための便利な機能です。DOMDocumentの読み込みでHTML構造が正しく解析されているか確認してください。要素の取得にはgetElementByIdを使用していますが、IDが存在しない場合はnullが返るため、if ($element)で存在チェックを行うことが重要です。classListDOMTokenListオブジェクトを返すため、lengthプロパティでクラスの数を確認したり、containsメソッドで特定のクラスの存在をチェックできます。addremoveメソッドでクラスを追加・削除した後は、getAttribute('class')class属性の文字列全体を確認できます。foreachDOMTokenListをループ処理することで、各クラスを個別に取得できます。

PHPでHTML要素のクラスを操作する

1<?php
2
3// HTML ドキュメントを作成
4$dom = new DOMDocument();
5$dom->loadHTML('<!DOCTYPE html><html><body><p class="foo bar">Hello, world!</p></body></html>');
6
7// p 要素を取得
8$element = $dom->getElementsByTagName('p')->item(0);
9
10// classList プロパティを取得
11$classList = $element->classList;
12
13// classList の内容を出力
14echo "クラスの数: " . $classList->length . PHP_EOL; // クラスの数を出力
15
16echo "各クラス:";
17foreach ($classList as $class) {
18    echo " " . $class; // 各クラスを出力
19}
20echo PHP_EOL;
21
22// 新しいクラスを追加
23$classList->add("baz");
24echo "クラス 'baz' を追加しました." . PHP_EOL;
25
26// クラスの存在を確認
27if ($classList->contains("foo")) {
28    echo "クラス 'foo' は存在します." . PHP_EOL;
29}
30
31// クラスを削除
32$classList->remove("bar");
33echo "クラス 'bar' を削除しました." . PHP_EOL;
34
35// 更新された classList の内容を出力 (HTMLに変更を反映させるには、DOMDocument::saveHTML() を使う)
36echo "現在のクラス:";
37foreach ($classList as $class) {
38    echo " " . $class; // 各クラスを出力
39}
40echo PHP_EOL;
41?>

PHP 8 における Dom\HTMLElement クラスの classList プロパティは、HTML要素の class 属性を操作するためのインターフェースを提供するものです。このプロパティは引数を取りませんが、DOMTokenList オブジェクトを返します。DOMTokenList は、要素が持つクラス名の集合を表現し、その操作を可能にします。

サンプルコードでは、まず DOMDocument を使用してHTMLドキュメントを読み込み、p 要素を取得しています。そして、$element->classList によって、p 要素の class 属性に対応する DOMTokenList オブジェクトを取得します。

DOMTokenListlength プロパティで、要素に設定されているクラスの数を調べることができます。DOMTokenList はイテレータとしても機能するため、foreach ループを使って各クラス名を取得し、出力できます。

DOMTokenList の主なメソッドとして、add()contains()remove() があります。add("baz") は、要素に "baz" というクラスを追加します。contains("foo") は、要素が "foo" というクラスを持っているかどうかを真偽値で返します。remove("bar") は、要素から "bar" というクラスを削除します。

これらの操作を行うことで、HTML要素の class 属性を動的に変更できます。変更をHTMLに反映するには、DOMDocument::saveHTML() メソッドを使用する必要があります。このサンプルコードは、classList プロパティを利用して、HTML要素のクラス属性を効率的に操作する方法を示しています。

Dom\HTMLElement::classListは、HTML要素のclass属性を操作するためのプロパティです。DOMTokenListオブジェクトとして、クラス名の追加、削除、存在確認ができます。

注意点として、classListへの変更は、DOMオブジェクト上でのみ有効です。HTMLファイル自体には自動的に反映されません。変更をHTMLに反映させるには、DOMDocument::saveHTML()メソッドを使用する必要があります。

また、classListは読み取り専用のプロパティではなく、DOMTokenListオブジェクトを返します。このオブジェクトを通して、クラス名の操作を行います。PHPのバージョンによっては、classListプロパティが利用できない場合があるため、事前にバージョンを確認してください。

関連コンテンツ

関連プログラミング言語

【PHP8.x】Dom\HTMLElement::classListプロパティの使い方 | いっしー@Webエンジニア