JavaScript getElementsByClassNameメソッドで複数のセレクタを指定する

2022年10月27日

環境
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」が変わります。

JavaScript

Posted by arkgame

関連記事: