getElementsByClassName() が他のすべての要素のクラスのみを変更するのはなぜですか?

HTMLCollection に関する ClassName の問題

JavaScript コードで、getElementsByClassName() を使用してクラス「block-default」を持つ要素を選択しています。 。」ただし、お気づきのとおり、クラスは他の要素ごとにのみ変更されます。

問題は、getElementsByClassName() によって返される HTMLCollection の性質にあります。これは、DOM の現在の状態を反映するライブ コレクションです。要素のクラス名を変更すると、その要素はコレクションから削除され、それ以上選択できなくなります。

解決策: 反復アプローチ

この問題を解決するには、次のようにします。 HTMLCollection を反復処理して、各要素のクラス名を個別に変更できます。そうすることで、すべての要素が更新されたクラスを受け取るようになります。

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (var i = 0; i < blockSetLength; i++) {
    blockSet[i].className = "block-selected";
}

代替解決策: 最初の要素のみを変更する

あるいは、次のように変更することもできます。最初の要素のクラス名。クラスが変更された後もコレクション内に残ります。変更されたコードは次のとおりです。

for (var i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

この方法では、最初の要素のクラス名を更新するだけでよく、HTMLCollection には「ブロック選択」クラスを持つすべての要素が含まれます。

注: 要素を反復処理することは、多くの要素が返される可能性がある実際のシナリオにとってより良い解決策です。 getElementsByClassName() を実行し、それらすべてに対して操作を実行する必要があります。

以上がgetElementsByClassName() が他のすべての要素のクラスのみを変更するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。