Rumah hujung hadapan web tutorial css Mengapakah Penukaran `className` Hanya Mempengaruhi Setiap Elemen Lain dalam HTMLCollection?

Mengapakah Penukaran `className` Hanya Mempengaruhi Setiap Elemen Lain dalam HTMLCollection?

Nov 28, 2024 am 03:09 AM

Why Does Changing `className` Only Affect Every Other Element in an HTMLCollection?

className Sahaja Mengubah Setiap Kelas Lain

Dalam coretan kod ini, isu dihadapi apabila sifat className hanya berubah untuk setiap elemen lain dalam koleksi. Matlamatnya adalah untuk memahami sebab di sebalik tingkah laku ini dan mencari penyelesaian.

Kod yang disediakan menggunakan kaedah getElementsByClassName() untuk mendapatkan semula elemen HTML dengan kelas "block-default". Ia kemudiannya meneruskan untuk mengubah suai harta className setiap elemen dalam koleksi kepada "dipilih blok". Walau bagaimanapun, hasilnya ialah hanya elemen ganti yang dikemas kini, meninggalkan yang lain dengan kelas "block-default" yang asal.

Penyebabnya terletak pada sifat HTMLCollections. Koleksi ini disiarkan secara langsung dan mencerminkan keadaan semasa DOM. Apabila sifat className sesuatu elemen diubah suai, koleksi itu sendiri turut terjejas. Khususnya, saiz koleksi berkurangan sejak elemen yang diubah suai dialih keluar daripada senarai.

Untuk membetulkan isu ini, adalah penting untuk diingat bahawa sebarang perubahan seterusnya pada elemen koleksi akan menjejaskan indeks unsur yang tinggal. Penyelesaiannya ialah menukar hanya nama kelas elemen pertama secara konsisten.

Satu kaedah melibatkan lelaran melalui pengumpulan dan mengubah suai elemen pertama berulang kali.

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

Pendekatan ini memastikan elemen pertama secara konsisten dikemas kini, tanpa mengira perubahan pada koleksi.

Sebagai alternatif, menggunakan operator spread boleh menukar HTMLCollection menjadi tatasusunan, membenarkan lebih fleksibiliti dalam mengubah suai elemen.

var blockArray = [...blockSet];

for (var i = 0; i < blockArray.length; i++) {
  blockArray[0].className = "block-selected";
}
Salin selepas log masuk

Dalam mana-mana kes, dengan mengubah suai hanya nama kelas elemen pertama, hasil yang diinginkan untuk menukar kelas setiap elemen dalam koleksi boleh dicapai.

Atas ialah kandungan terperinci Mengapakah Penukaran `className` Hanya Mempengaruhi Setiap Elemen Lain dalam HTMLCollection?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM

Muat naik fail dengan multer di node.js dan ekspres

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma) Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma) Mar 01, 2025 am 09:32 AM

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)

See all articles