直近の記事一覧
Webのシステムを変えた方が良いかな。 （24年11月28日）
Apple Intelligence （24年10月29日）
1011 （24年10月11日）
診療（10月8日） （24年10月8日）
発熱（10月7日） （24年10月7日）
下のような HTML（＆JavaScript）がある。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="Main">
<div class="item active"></div>
<div class="item active"></div>
<div class="item active"></div>
<div class="item active"></div>
</div>
<script type="text/javascript">
const Elements = document.getElementsByClassName("active")
for(let i = 0; i < Elements.length; i++){
const Element = Elements[i]
Element.classList.remove("active")
}
console.log(Elements);
</script>
</body>
</html>script の内容は，active クラスをもつ div 要素を取得し，それらから active クラスを削除することです。
最後に Elements 変数を出力します。
しかし，これをブラウザ上で実行すると，コンソールでは次のように表示されます。
HTMLCollection (2)
0
<div class="item active"></div>
1
<div class="item active"></div>ここで注意したいことは，Elements 変数の中にある div 要素が 2つしかないことと，active クラスをもつ要素が残っていること。
コードの中を修正し，より確認します。
const Elements = document.getElementsByClassName("active")
for(let i = 0; i < Elements.length; i++){
const Element = Elements[i]
Element.classList.remove("active")
Elements.length;
}実行すると次の値が返ってきます。
3
2ループ中にて，getElementByClassName で取得した要素数が変化しています。
そのため， i で取得している要素にズレが生じ，classList.remove() が正しく働いていないのでしょう。
forEach も試しましたが同じ結果でした。
そこで，次のように while を使うと結果が変わります。
const Elements = document.getElementsByClassName("active")
let i = 0;
while(Elements.length !== 0){
const Element = Elements[i]
Element.classList.remove("active")
}
console.log(Elements)console.log の内容は次。
HTMLCollection (0)
プロパティなしこれで，active クラスをもつ要素がすべて削除されたことを確認できます。
しかし，もっとスマートな方法がありそうですが，どうでしょう。
jQuery だったら，まとめてクラス削除できるのですが・・・。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。