【PHP8.x】classListプロパティの使い方

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

作成日: 更新日:

基本的な使い方

classListプロパティは、PHPのDom\Elementクラスに属し、HTML要素のclass属性の値を操作するためのDOMTokenListオブジェクトを保持するプロパティです。

このプロパティは、Webページ内のHTML要素が持つclass属性に設定された複数のクラス名を、個々の文字列(トークン)として扱い、その追加、削除、確認などの操作を簡潔に行うための機能を提供します。具体的には、Dom\Elementオブジェクトに対してclassListプロパティにアクセスすると、DOMTokenList型のオブジェクトが返されます。

返されたDOMTokenListオブジェクトを通じて、開発者はHTML要素のクラス名を直感的に操作できます。例えば、add()メソッドを使用して新しいクラス名を追加したり、remove()メソッドで既存のクラス名を削除したり、contains()メソッドで特定のクラス名が要素に存在するかどうかを確認したりできます。また、toggle()メソッドを使えば、クラスが存在すれば削除し、存在しなければ追加するという操作を一度に行うことも可能です。

PHP 8環境でウェブアプリケーションを開発する際に、DOM操作を通じてHTML要素のスタイルや動作を動的に変更する必要がある場面で、classListプロパティは非常に強力なツールとなります。class属性全体を直接文字列として操作する際の複雑さやエラーのリスクを避け、より安全で効率的なクラス管理を実現します。これにより、JavaScriptと連携したフロントエンド処理のバックエンド実装もスムーズに行えるようになります。

構文(syntax)

1<?php
2
3// HTMLコンテンツを持つDOMDocumentを作成
4$dom = new DOMDocument();
5$dom->loadHTML('<div id="myElement" class="initial-class another-class">Hello PHP!</div>');
6
7// 特定の要素(Dom\Elementオブジェクト)を取得
8$element = $dom->getElementById('myElement');
9
10// Dom\Element::classList プロパティにアクセスして、DOMTokenListオブジェクトを取得します。
11// このオブジェクトを通じて、要素のクラス属性(class attribute)を操作できます。
12$classList = $element->classList;
13
14// 現在のクラスリストの内容を表示
15echo "現在のクラス: " . implode(' ', (array)$classList) . "\n";
16
17// クラスリストに新しいクラスを追加
18$classList->add('new-class');
19echo "クラス追加後: " . implode(' ', (array)$classList) . "\n";
20
21// クラスリストから既存のクラスを削除
22$classList->remove('another-class');
23echo "クラス削除後: " . implode(' ', (array)$classList) . "\n";
24
25// クラスがリスト内に存在するかどうかを確認
26$hasClass = $classList->contains('initial-class');
27echo "initial-class が存在するか: " . ($hasClass ? 'はい' : 'いいえ') . "\n";
28
29?>

引数(parameters)

引数なし

引数はありません

戻り値(return)

DOMTokenList

Dom\Element クラスの classList プロパティは、要素の class 属性の値を表す DOMTokenList オブジェクトを返します。このオブジェクトを使用すると、クラスの追加、削除、切り替え、および存在チェックを簡単に行うことができます。

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