「getElementsByClassName()」でクラス名を変更すると、JavaScript の他のすべての要素にのみ影響するのはなぜですか?

クラス名を他のクラスごとに変更する問題

問題

JavaScript では、getElementsByClassName() メソッドは要素を含む HTMLCollection を返します。指定された CSS クラスを共有するもの。ただし、これらの要素にクラスの変更を適用すると、代替クラスのみが影響を受けることが確認されています。

原因

この問題は、getElementsByClassName() によって返される HTMLCollection がライブ コレクションであるために発生します。これは、クラス名の変更など、DOM を変更すると、コレクション自体が変更されることを意味します。

className プロパティが変更されると、要素はコレクションから削除されます。これにより、コレクションのサイズが減少し、その後そのインデックスを使用して同じ要素にアクセスしようとすると、代替要素がスキップされる可能性があります。

解決策

この問題を解決するには、2 つの可能性があります。解決策:

1.最初の要素の ClassName のみを変更する

HTMLCollection 全体を繰り返し処理して各要素の className を変更する代わりに、最初の要素の className のみを変更します。

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

2.静的な配列のようなデータ構造を使用する

ライブ コレクションを返す getElementsByClassName() を使用する代わりに、静的な配列のようなデータ構造を作成します。これを行うには、Array.from() 関数を使用して HTMLCollection を通常の配列に変換するか、配列を手動で作成して HTMLCollection 要素を入力します。

const blockSetArray = Array.from(blockSet);

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

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