Mengapa `forEach` Tidak Berfungsi Terus pada `HTMLCollection`?

Lelaran melalui HTMLCollection dengan Array.forEach

Dalam dilema ini, pembangun cuba untuk melelaran elemen DOM menggunakan document.getElementsByClassName("myclass").forEach hanya untuk menghadapi ralat yang menyatakan, ".forEach bukan a function."

Memahami HTMLCollection

Kunci untuk menyelesaikan ralat ini terletak pada memahami sifat hasil yang dikembalikan oleh getElementsByClassName. Bertentangan dengan namanya, ia tidak menghasilkan tatasusunan melainkan HTMLCollection. HTMLCollection, sama seperti NodeList, mengikut spesifikasi DOM4 dan berbeza daripada tatasusunan tradisional dengan cara yang halus namun ketara.

Menukar HTMLCollection kepada Array

Untuk menggunakan kaedah yang berkuasa untukSetiap kaedah, seseorang mesti terlebih dahulu mengubah HTMLCollection ke dalam tatasusunan. Beberapa kaedah boleh mencapai penukaran ini:

Menggunakan Array.prototype.forEach.call:

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

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

Menggunakan [].forEach.call:

[].forEach.call(els, function (el) {...});

Menggunakan Array.from (ES6):

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

Dengan menukar HTMLCollection kepada tatasusunan, seseorang boleh memanfaatkan pelbagai kaedah tatasusunan, termasuk forEach, untuk memproses dan memanipulasi elemen DOM dengan cekap.

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