Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengulang dengan Betul Melalui getElementsByClassName dan Elakkan Tingkah Laku Tidak Diramalkan?

Bagaimana untuk Mengulang dengan Betul Melalui getElementsByClassName dan Elakkan Tingkah Laku Tidak Diramalkan?

Susan Sarandon
Susan Sarandonasal
2024-11-09 21:59:02273semak imbas

How to Iterate Correctly Through getElementsByClassName and Avoid Unpredictable Behaviour?

Lelaran Dengan Betul Melalui getElementsByClassName

Apabila bekerja dengan halaman web, mengakses elemen mengikut nama kelasnya adalah tugas biasa. Kaedah getElementsByClassName menyediakan NodeList, yang mewakili koleksi elemen padanan. Walau bagaimanapun, lelaran melalui NodeList boleh menjadi rumit, terutamanya apabila mengubah suai DOM.

Dalam kes anda, anda cuba melelang melalui elemen yang dikembalikan oleh getElementsByClassName("slide") dan melakukan tindakan pada setiap elemen menggunakan fungsi Edar. Walau bagaimanapun, anda menghadapi gelagat yang tidak dapat diramalkan disebabkan oleh perubahan sifat NodeList.

Penyelesaiannya ialah menggunakan kaedah item(indeks) untuk mendapatkan semula elemen individu daripada NodeList. Begini cara untuk lelaran dengan betul:

const slides = document.getElementsByClassName("slide");

for (let i = 0; i < slides.length; i++) {
    Distribute(slides.item(i));
}

Dengan menggunakan kaedah item(), anda boleh mengakses setiap elemen dalam NodeList mengikut indeksnya. Ini memastikan bahawa lelaran kekal deterministik, walaupun DOM berubah.

Pertimbangan Tambahan

Jika elemen slaid anda boleh disarangkan antara satu sama lain, adalah penting untuk ambil perhatian bahawa kaedah item() akan mengembalikan null untuk sebarang elemen bersarang yang tidak mempunyai nama kelas yang ditentukan. Untuk mengendalikan slaid bersarang, anda boleh menggunakan teknik yang lebih maju seperti menanyakan semua elemen dalam bekas dan menapisnya mengikut nama kelas.

Atas ialah kandungan terperinci Bagaimana untuk Mengulang dengan Betul Melalui getElementsByClassName dan Elakkan Tingkah Laku Tidak Diramalkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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