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