【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 オブジェクトを返します。このオブジェクトを使用すると、クラスの追加、削除、切り替え、および存在チェックを簡単に行うことができます。
サンプルコード
PHP 8 Dom\Element::classList でクラス操作を学ぶ
1<?php 2 3/** 4 * Dom\Element::classList プロパティの使用方法をデモンストレーションします。 5 * 6 * PHP 8 の新しい DOM 拡張機能を使用し、Dom\Element クラスの classList プロパティを通じて、 7 * HTML要素のクラス属性を安全かつ簡単に操作する方法を示します。 8 * システムエンジニアを目指す初心者向けに、各操作を「レッスン」として提示します。 9 */ 10function demonstrateDomElementClassListLessons(): void 11{ 12 // 1. Dom\Document と Dom\Element の作成 13 // PHP 8 の新しい DOM 拡張機能を使用し、Dom\Document オブジェクトを生成します。 14 $document = new Dom\Document('1.0', 'UTF-8'); 15 // document から Dom\Element (例: div) を作成し、初期クラスを設定します。 16 $element = $document->createElement('div'); 17 $element->setAttribute('id', 'my-dom-element'); 18 $element->setAttribute('class', 'base-style initial-state'); 19 $document->appendChild($element); 20 21 echo "--- レッスン開始: Dom\\Element::classList の使い方 ---\n"; 22 echo "初期状態: " . $element->getAttribute('class') . "\n\n"; 23 24 // 2. classList プロパティへのアクセス 25 // Dom\Element の classList プロパティは DOMTokenList オブジェクトを返します。 26 // これにより、クラスの追加、削除、切り替えなどが簡単に行えます。 27 $classList = $element->classList; 28 29 // レッスン 1: クラスの追加 (add) 30 // 1つまたは複数のクラスを要素に追加します。 31 $classList->add('lesson-one', 'active-feature'); 32 echo "レッスン1 (add 'lesson-one', 'active-feature'): " . $element->getAttribute('class') . "\n"; 33 34 // レッスン 2: 特定のクラスが存在するか確認 (contains) 35 // 要素に特定のクラスが含まれているかを真偽値で返します。 36 if ($classList->contains('active-feature')) { 37 echo "レッスン2 ('active-feature' が存在します)。\n"; 38 } 39 40 // レッスン 3: クラスの削除 (remove) 41 // 1つまたは複数のクラスを要素から削除します。 42 $classList->remove('initial-state'); 43 echo "レッスン3 (remove 'initial-state'): " . $element->getAttribute('class') . "\n"; 44 45 // レッスン 4: クラスの切り替え (toggle) 46 // クラスが存在すれば削除し、存在しなければ追加します。 47 // キーワード「lol」を取り入れ、「lol-effect」というクラスでデモンストレーションします。 48 $classList->toggle('lol-effect'); // 'lol-effect' は存在しないので追加されます 49 echo "レッスン4 (toggle 'lol-effect' - 追加): " . $element->getAttribute('class') . "\n"; 50 51 $classList->toggle('lol-effect'); // 'lol-effect' は既に存在するので削除されます 52 echo "レッスン4 (toggle 'lol-effect' - 削除): " . $element->getAttribute('class') . "\n"; 53 54 // レッスン 5: DOMTokenList の反復処理 55 // classList (DOMTokenList) は反復可能であり、現在の全てのクラス名を取得できます。 56 echo "レッスン5 (現在のクラス一覧):\n"; 57 foreach ($classList as $index => $className) { 58 echo " - クラス $index: $className\n"; 59 } 60 61 // レッスン 6: classList の value プロパティ 62 // 現在の全てのクラス名をスペース区切りの文字列として取得します。 63 echo "レッスン6 (classList->value): " . $classList->value . "\n"; 64 65 echo "\n--- レッスン終了: 最終状態 ---\n"; 66 // 最終的な要素のHTMLを確認 67 echo "最終HTML: " . $document->saveHTML($element) . "\n"; 68} 69 70// 関数を実行してデモンストレーションを開始します。 71demonstrateDomElementClassListLessons();
このPHP 8のサンプルコードは、新しいDOM拡張機能で導入されたDom\ElementクラスのclassListプロパティの基本的な使用方法を、システムエンジニアを目指す初心者の方にもわかりやすい「レッスン」として解説しています。classListプロパティは、HTML要素のclass属性をより安全かつ簡単に操作できるように設計されており、引数は取りません。
このプロパティにアクセスすると、DOMTokenListという特殊なオブジェクトが戻り値として返されます。このDOMTokenListオブジェクトには、クラスを追加、削除、確認、切り替えなどを行うための便利なメソッドが用意されています。
具体的には、「レッスン1」ではadd()メソッドを使用してクラスを追加し、「レッスン3」ではremove()メソッドでクラスを削除する方法を示しています。「レッスン2」ではcontains()メソッドで特定のクラスが要素に含まれているかを確認できます。「レッスン4」ではtoggle()メソッドが登場し、クラスが存在すれば削除、存在しなければ追加という操作を一度に行います。ここでは「lol-effect」というクラス名を用いて、この切り替えの動きをデモンストレーションしています。
また、「レッスン5」ではclassListが反復可能であるため、foreachループを使って現在の全てのクラス名を個別に取得できることを示しています。さらに、「レッスン6」ではvalueプロパティを用いて、現在の全クラス名をスペース区切りの文字列として一括で取得する方法も紹介しています。
classListプロパティを利用することで、HTML要素のクラス属性値を直接文字列として操作するよりも、簡潔でエラーの少ないコードで動的なクラス操作を実現できます。
このサンプルコードで示されているDom\Element::classListプロパティは、PHP 8以降の新しいDOM拡張機能で導入されました。そのため、PHP 7以前の環境では動作しない点にご注意ください。classListは、クラス属性の文字列を直接操作する代わりにDOMTokenListというオブジェクトを返します。これにより、add、remove、toggleなどの専用メソッドを使って、クラスを安全かつ直感的に管理できます。例えば、複数のクラス名をスペース区切りで一括追加・削除する際も、これらのメソッドを使うことで処理が簡潔になります。この機能はサーバーサイドでHTMLを構築する際に使用され、ブラウザのJavaScriptのclassListとは実行環境が異なります。クラス名には半角スペースを含めず、単一のクラス名を指定してメソッドを呼び出すようにしてください。これにより、意図しない挙動を防ぎ、堅牢なコードを記述できます。
PHP: Dom\Element::classListでクラス操作する
1<?php 2 3/** 4 * Dom\Element::classList プロパティの使用方法をデモンストレーションします。 5 * 6 * Dom\Element の classList プロパティは、HTML要素の `class` 属性にアクセスし、 7 * クラスの追加、削除、存在チェックなどの操作を簡単に行うための DOMTokenList オブジェクトを返します。 8 * システムエンジニアを目指す初心者が、DOM操作におけるクラス管理の基本を理解するのに役立ちます。 9 */ 10function demonstrateClassListOperations(): void 11{ 12 // 1. 新しい HTML ドキュメントを作成します。 13 // PHP 8 の新しい DOM 拡張では、名前空間付きのクラスが推奨されます。 14 $document = new DOM\HTMLDocument(); 15 16 // 2. HTML コンテンツをドキュメントにロードします。 17 // class="initial-class another-class" を持つ div 要素を作成します。 18 $htmlContent = '<html><body><div id="myElement" class="initial-class another-class">Hello PHP classList!</div></body></html>'; 19 $document->loadHTML($htmlContent); 20 21 // 3. ID を使用して操作対象の Dom\Element を取得します。 22 $element = $document->getElementById('myElement'); 23 24 // 要素が正常に取得できたことを確認します。 25 if ($element instanceof DOM\Element) { 26 echo "--- 初期状態 ---\n"; 27 echo "要素の HTML: " . $document->saveHTML($element) . "\n"; 28 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($element->classList)) . "\n\n"; 29 30 // 4. Dom\Element の classList プロパティにアクセスします。 31 // これは DOMTokenList オブジェクトを返します。 32 $classList = $element->classList; 33 34 // クラスを1つ追加します。 35 $classList->add('new-class'); 36 echo "--- 'new-class' を追加後 ---\n"; 37 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 38 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 39 40 // キーワード 'lol' をクラスとして追加します。 41 $classList->add('lol'); 42 echo "--- 'lol' を追加後 ---\n"; 43 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 44 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 45 46 // 特定のクラスが存在するかどうかを確認します。 47 echo "--- クラスの存在チェック ---\n"; 48 echo "'initial-class' は存在しますか？ " . ($classList->contains('initial-class') ? 'はい' : 'いいえ') . "\n"; 49 echo "'non-existent-class' は存在しますか？ " . ($classList->contains('non-existent-class') ? 'はい' : 'いいえ') . "\n\n"; 50 51 // クラスを1つ削除します。 52 $classList->remove('another-class'); 53 echo "--- 'another-class' を削除後 ---\n"; 54 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 55 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 56 57 // クラスを切り替えます (存在しない場合は追加されます)。 58 $classList->toggle('toggled-class'); 59 echo "--- 'toggled-class' をトグル (追加) 後 ---\n"; 60 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 61 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 62 63 // クラスを再度切り替えます (既に存在するため削除されます)。 64 $classList->toggle('toggled-class'); 65 echo "--- 'toggled-class' を再度トグル (削除) 後 ---\n"; 66 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 67 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 68 69 // 複数のクラスを同時に追加・削除することも可能です。 70 $classList->add('class-A', 'class-B'); 71 $classList->remove('lol', 'new-class'); 72 echo "--- 複数クラスの追加/削除後 ---\n"; 73 echo "現在のクラスリスト: " . implode(', ', iterator_to_array($classList)) . "\n"; 74 echo "要素の HTML: " . $document->saveHTML($element) . "\n\n"; 75 76 } else { 77 echo "エラー: 指定されたIDの要素が見つかりませんでした。\n"; 78 } 79} 80 81// 関数を実行してデモンストレーションを開始します。 82demonstrateClassListOperations();
PHP 8のDom\Element::classListプロパティは、HTML要素が持つclass属性を効率的に操作するための機能です。このプロパティにアクセスすると、DOMTokenListというオブジェクトが返されます。DOMTokenListはプロパティであるため引数を取りませんが、そのメソッド群を使って、クラスの追加、削除、存在チェック、切り替えなど、class属性に格納された複数のクラス名を個別に管理できます。
サンプルコードでは、まずHTMLドキュメント内にid="myElement"を持つdiv要素を作成し、初期のクラスを設定しています。次に、この要素のclassListプロパティを取得し、そのDOMTokenListオブジェクトに対して様々な操作をデモンストレーションしています。具体的には、add()メソッドで「new-class」や「lol」を追加したり、contains()メソッドで特定のクラスの有無を確認したり、remove()メソッドで「another-class」を削除したり、toggle()メソッドで「toggled-class」を追加・削除したりする様子が示されています。これにより、HTML要素のclass属性が動的にどのように変化するかが明確にわかります。この機能は、Webページで要素の見た目や振る舞いを動的に変更する際に非常に役立ち、システムエンジニアを目指す初心者がDOMのクラス管理を学ぶ上で重要な基礎となります。
このサンプルコードは、PHP 8で導入された新しいDOM拡張におけるDom\Element::classListプロパティの利用方法を示しています。classListは、HTML要素のclass属性をDOMTokenListオブジェクトとして扱い、クラスの追加、削除、存在チェックなどを安全かつ簡単に行うための機能です。
初心者が特に注意すべき点は、classListプロパティが直接class属性の文字列を返すのではなく、DOMTokenListという専用のオブジェクトを返すことです。そのため、クラスを操作する際には、add、remove、containsなどのDOMTokenListオブジェクトのメソッドを使用する必要があります。また、getElementByIdなどで要素を取得する際は、対象の要素が見つからない場合にnullが返される可能性があります。コードを安全に利用するため、サンプルコードのようにinstanceof DOM\Elementで、確実に要素が取得できたことを確認してから操作を行うようにしてください。これにより、エラーを防ぎ、堅牢なプログラムを作成できます。