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

望ましくないクラス変更パターン: 他のすべてのクラスが影響を受ける

JavaScript で getElementsByClassName() を使用しているときに、課題に直面しています。すべての要素のクラスを変更しようとすると、他のすべてのクラスのみが変更されるという問題が発生します。

根本原因: HTMLCollection の変更

の根本的な原因この問題は、getElementsByClassName() によって返される HTMLCollection の性質にあります。コレクション内の要素のクラスを変更すると、コレクション自体が更新され、その要素は含まれなくなります。これは、コレクションを反復処理するときに、実質的に代替要素をスキップしていることを意味します。

解決策: 配列を反復処理する

この問題を解決するには、配列を反復処理します。続行中にコレクションを変更するのではなく、元のコレクションの配列を使用します。これにより、以前の変更に関係なく、クラスの変更がすべての要素に確実に適用されます。

For ループを使用したコードの更新:

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

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

メモ:

• 各要素のクラスを個別に変更する代わりに、for を使用できます。ループを使用して要素を反復処理し、クラスを変更します。
• この更新されたコードは、反復ごとに blockSet 配列の最初の要素に「ブロック選択」クラスを割り当てます。
• 配列を使用すると、反復中にコレクションが変更される問題を回避できます。

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