Mengapa `getElementsByClassName` Tidak Berfungsi dengan `forEach` Secara Terus?

Array.forEach Kaedah: Keserasian dengan getElementsByClassName

Semasa cuba mengulang elemen DOM menggunakan getElementsByClassName method, pembangun mungkin menemui kaedah ralat pelik: "document.getElementsByClassName('myclass').forEach bukan fungsi." Walaupun terdapat kedua-dua getElementsByClassName dan Array.forEach dalam Firefox 3, ralat berterusan.

Kekeliruan timbul kerana hasil getElementsByClassName bukan Array. Dalam pelayar moden, ia ialah HTMLCollection, koleksi khusus yang disesuaikan untuk elemen HTML. Walaupun ia mempunyai sifat seperti tatasusunan, ia bukanlah tatasusunan yang benar.

Untuk menyelesaikan isu tersebut dan berjaya mengulangi elemen, pembangun boleh menggunakan helah: mereka boleh memanggil kaedah Array's forEach, menghantar HTMLCollection sebagai nilai ini:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
});

Teknik ini membolehkan lelaran diteruskan seperti yang diharapkan. Sebagai alternatif, pembangun boleh menggunakan Array.from, tersedia dalam persekitaran ES6, untuk menukar HTMLCollection kepada Array sebelum melelakan:

Array.from(els).forEach((el) => {
    // Do stuff here
});

Dengan menggunakan teknik ini, pembangun boleh mengulang secara berkesan elemen DOM yang diperoleh melalui getElementsByClassName, memastikan keserasian dengan kaedah Array.forEach.

Atas ialah kandungan terperinci Mengapa `getElementsByClassName` Tidak Berfungsi dengan `forEach` Secara Terus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!