JavaScript getElementsByClassNameメソッドで複数のセレクタを指定する
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
document.getElementsByClassName(“クラス名1 クラス名2");
空白区切で1つのクラスにある複数のセレクタを指定します。
getElementsByClassNameを使って引数に半角スペース区切りでクラスを2つ指定しています。
使用例
<!DOCTYPE html> <html> <head> </head> <body> <p class="spA spB">tokyo</p> <input type="button" value="変更" onclick="funA()" /> <script> function funA() { const cft = document.getElementsByClassName("spA spB"); if(cft.item(0).textContent ==='tokyo'){ cft.item(0).textContent ='oosaka'; } else { cft.item(0).textContent ='tokyo'; } } </script> </body> </html>
結果
「変更」ボタンを押すと、文字「oosaka」が変わります。