Mengapakah Menukar Nama Kelas dengan `getElementsByClassName()` Hanya Mempengaruhi Setiap Elemen Lain dalam JavaScript?

className Menukar Setiap Masalah Kelas Lain

Isu

Dalam JavaScript, kaedah getElementsByClassName() mengembalikan HTMLCollection yang mengandungi elemen yang berkongsi kelas CSS tertentu. Walau bagaimanapun, telah diperhatikan bahawa apabila menggunakan perubahan kelas pada elemen ini, hanya kelas ganti yang terjejas.

Punca

Isu ini timbul kerana HTMLCollection yang dikembalikan oleh getElementsByClassName() ialah koleksi langsung. Ini bermakna bahawa sebarang perubahan pada DOM, seperti mengubah suai nama kelas, akan mengubah suai koleksi itu sendiri.

Apabila sifat className diubah suai, elemen itu dialih keluar daripada koleksi. Ini mengakibatkan saiz koleksi berkurangan, dan percubaan seterusnya untuk mengakses elemen yang sama menggunakan indeksnya mungkin mengakibatkan melangkau elemen ganti.

Penyelesaian

Untuk menyelesaikan isu ini, terdapat dua potensi penyelesaian:

1. Ubah suai Hanya Nama Kelas Elemen Pertama

Daripada mengulangi keseluruhan HTMLCollection dan menukar className setiap elemen, ubah suai hanya className elemen pertama.

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

2. Gunakan Struktur Data seperti Tatasusunan Statik

Daripada menggunakan getElementsByClassName(), yang mengembalikan koleksi langsung, buat struktur data seperti tatasusunan statik. Ini boleh dilakukan dengan menggunakan fungsi Array.from() untuk menukar HTMLCollection kepada tatasusunan biasa, atau mencipta tatasusunan secara manual dan mengisinya dengan elemen HTMLCollection.

const blockSetArray = Array.from(blockSet);

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

Atas ialah kandungan terperinci Mengapakah Menukar Nama Kelas dengan `getElementsByClassName()` Hanya Mempengaruhi Setiap Elemen Lain dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!