「className」の変更が HTMLCollection 内の他のすべての要素にのみ影響するのはなぜですか?

className が他のクラスごとにのみ変更される

このコード スニペットでは、className プロパティが他のすべての要素でのみ変更されるという問題が発生します。コレクションの中で。目標は、この動作の背後にある理由を理解し、解決策を見つけることです。

提供されたコードは、getElementsByClassName() メソッドを利用して、クラス「block-default」の HTML 要素を取得します。次に、コレクション内の各要素の className プロパティを「block-selected」に変更します。ただし、その結果、代替要素のみが更新され、他の要素は元の「block-default」クラスのままになります。

原因は HTMLCollection の性質にあります。これらのコレクションはライブであり、DOM の現在の状態を反映しています。要素の className プロパティが変更されると、コレクション自体も影響を受けます。具体的には、変更された要素がリストから削除されるため、コレクションのサイズが減少します。

この問題を修正するには、コレクションの要素に対するその後の変更が残りの要素のインデックスに影響することを覚えておくことが重要です。解決策は、最初の要素の className のみを一貫して変更することです。

1 つの方法では、コレクションを反復処理して最初の要素を繰り返し変更します。

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

このアプローチでは、最初の要素が一貫して変更されることが保証されます。

または、スプレッド演算子を使用して HTMLCollection を配列に変換し、要素を変更する際の柔軟性が高まります。

var blockArray = [...blockSet];

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

いずれの場合も、最初の要素の className のみを変更することで、コレクション内のすべての要素のクラスを変更するという望ましい結果を達成できます。

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