Bagaimana untuk Mendapatkan Berbilang Elemen dengan ID yang Sama dalam JavaScript?

Mengurus Berbilang Elemen dengan ID yang Sama dalam JavaScript

Dalam JavaScript, getElementById ialah kaedah yang digunakan untuk mendapatkan semula elemen berdasarkan atribut IDnya . Walau bagaimanapun, apakah yang berlaku apabila berbilang elemen mempunyai ID yang sama?

Pernyataan Masalah:

Bagaimanakah kita boleh mendapatkan semula koleksi elemen dengan atribut ID yang sama menggunakan getElementById?

Perbincangan dan Penyelesaian:

Sementara itu tidak disyorkan untuk menggunakan berbilang ID yang sama dalam halaman web, mungkin terdapat kejadian di mana ini berlaku. Untuk menangani isu ini, kami boleh menggunakan penyelesaian:

Satu pendekatan ialah menggunakan querySelectorAll, yang mengembalikan koleksi elemen yang sepadan dengan pemilih yang ditentukan. Berikut ialah contoh:

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

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

Dengan menggunakan pemilih CSS dengan kurungan segi empat sama, kami boleh mendapatkan semula semua elemen dengan nilai ID yang ditentukan, walaupun ia muncul beberapa kali.

Sebagai alternatif, jika kita mesti menggunakan getElementById secara eksklusif, kita boleh mendapatkan semula unsur-unsur mengikut nilai ID mereka dan menambahkannya pada tatasusunan:

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...

Dengan menambah nilai ID dalam setiap lelaran, kami berkesan mencipta ID unik yang boleh diakses menggunakan getElementById.

Ingat bahawa menggunakan berbilang ID yang serupa boleh membawa kepada tingkah laku yang tidak dijangka dan ia biasanya bukan amalan yang disyorkan. Walau bagaimanapun, penyelesaian ini boleh membantu dalam mengendalikan pangkalan kod sedia ada atau semasa bekerja dengan dokumen HTML pihak ketiga.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Berbilang Elemen dengan ID yang Sama dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!