JavaScriptで同じIDを持つ複数の要素を取得するにはどうすればよいですか?

JavaScript で同じ ID を持つ複数の要素を管理する

JavaScript では、getElementById は ID 属性に基づいて要素を取得するために使用されるメソッドです。しかし、複数の要素が同じ ID を持つ場合はどうなりますか?

問題ステートメント:

getElementById を使用して同じ ID 属性を持つ要素のコレクションを取得するにはどうすればよいですか?

ディスカッションと解決策:

推奨されませんがWeb ページ内で複数の同一 ID を使用すると、この問題が発生する場合があります。この問題に対処するには、次の回避策を採用できます。

1 つのアプローチは、指定されたセレクターに一致する要素のコレクションを返す querySelectorAll を使用することです。以下に例を示します。

var elms = document.querySelectorAll("[id='duplicateID']");

// Access and modify the elements as needed...

角かっこを使用して CSS セレクターを使用すると、複数回出現する場合でも、指定された ID 値を持つすべての要素を取得できます。

あるいは、次の場合getElementById を排他的に使用する必要があります。ID 値によって要素を繰り返し取得し、それらをarray:

var elms = [];
var id = "duplicateID";

// Loop through all elements with the specified ID...
while (document.getElementById(id)) {
  // Add the element to the array...
  elms.push(document.getElementById(id));

  // Increment the id to avoid duplicates...
  id += "_duplicate";
}

// Access and modify the array of elements...

反復ごとに ID 値をインクリメントすることで、getElementById を使用してアクセスできる一意の ID を効率的に作成できます。

複数の同一 ID を使用すると、予期しない動作が発生する可能性があることに注意してください。これは一般的に推奨される方法ではありません。ただし、これらの回避策は、既存のコードベースを処理する場合、またはサードパーティの HTML ドキュメントを操作する場合に役立ちます。

以上がJavaScriptで同じIDを持つ複数の要素を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。