HTMLのclass属性で複数要素を取り出す
HTML内にclass属性をつけて、その要素を操作することはよくある。「JavaScriptの基礎をおさえる①」でfruitというclass属性のついたliタグができているので、これを取り出して確認する。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>step0</title>
</head>
<body>
<ul id = "arrayTest"></ul>
<script src = "./main.js"></script>
</body>
</html>
これに対して
main.js
let fruits = ["りんご","もも","みかん"];
let fruitsStr ="";
for(let i = 0; i < fruits.length; i++){
fruitsStr += '<li class = "fruit">' + fruits[i] + '</li>';
}
let arrayElm = document.getElementById("arrayTest");
arrayElm.innerHTML = fruitsStr;
let fruitElms = document.getElementsByClassName("fruit");①
for(let i = 0;i < fruitElms.length; i++){
let fruitElm = fruitElms[i];
console.log(fruitElm.textContent);②
}
id属性と違い、class属性は画面に複数配置することができるため、class属性の名前を条件に指定すると複数の要素が取れる可能性がある。
document.getElementsByClassNameを使うと、指定したclass属性が適用されている要素を全て取得する。
今回であれば、fruitクラスは、「りんご」、「もも」、「みかん」の3つなので、fruitElms.lenghは３となる。
取得してきたfruitElmsにforで順番にアクセスして、<li>で囲まれたテキストをtextContentプロパティを使って取得し、コンソールに出力した。以下のように出力される。
また、class属性の指定が画面上に一つだけあって、それを取り出したいシーンもある。その場合以下のような要領で一行で書き、最初の一つの要素を取り出すことも取り出すことも多いので覚えておくと良い。
let fruitElm = document.getElementsByclassName("fruit")[0];