Mengapakah getElementsByClassName() Hanya Mengubah Setiap Kelas Elemen Lain?

Isu ClassName dengan HTMLCollection

Dalam kod JavaScript anda, anda menggunakan getElementsByClassName() untuk memilih elemen dengan kelas "block-default ." Walau bagaimanapun, seperti yang anda perhatikan, kelas berubah hanya untuk setiap elemen lain.

Masalahnya terletak pada sifat HTMLCollection yang dikembalikan oleh getElementsByClassName(). Ia adalah koleksi langsung yang menggambarkan keadaan semasa DOM. Apabila anda menukar nama kelas sesuatu elemen, ia akan dialih keluar daripada koleksi, menjadikannya tidak tersedia untuk pemilihan selanjutnya.

Penyelesaian: Pendekatan Berulang

Untuk menyelesaikan isu ini, anda boleh lelaran melalui HTMLCollection dan menukar nama kelas setiap elemen secara individu. Dengan berbuat demikian, anda akan memastikan bahawa setiap elemen menerima kelas yang dikemas kini:

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

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

Penyelesaian Ganti: Hanya Tukar Elemen Pertama

Sebagai alternatif, anda boleh mengubah suai nama kelas elemen pertama, kerana ia kekal dalam koleksi walaupun selepas kelasnya berubah. Berikut ialah kod yang diubah suai:

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

Dengan cara ini, anda hanya perlu mengemas kini nama kelas bagi elemen pertama dan HTMLCollection masih akan mengandungi semua elemen dengan kelas "block-selected".

Nota: Mengulangi elemen ialah penyelesaian yang lebih baik untuk senario praktikal di mana banyak elemen boleh dikembalikan oleh getElementsByClassName() dan anda perlu melakukan operasi pada kesemuanya.

Atas ialah kandungan terperinci Mengapakah getElementsByClassName() Hanya Mengubah Setiap Kelas Elemen Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!