為什麼 `getElementsByClassName` 不直接與 `forEach` 一起使用？

Array.forEach 方法：與getElementsByClassName

的相容性

在嘗試使用getElementsByClassName 方法迭代DOM 元素時，開發人員可能會遇到特殊錯誤：「document.getElementsByClassName('myclass').forEach是不是一個函數。

之所以會出現混亂，是因為 getElementsByClassName 的結果不是陣列。在現代瀏覽器中，它是一個 HTMLCollection，一個專為 HTML 元素量身定制的集合。儘管它具有類似數組的屬性，但它不是真正的數組。

要解決這個問題並成功迭代元素，開發人員可以使用一個技巧：他們可以呼叫Array 的forEach 方法，將HTMLCollection 作為這個值：

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

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

這種技術允許迭代按預期進行。或者，開發人員可以使用ES6 環境中可用的Array.from 在迭代之前將HTMLCollection 轉換為數組：

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

透過利用這些技術，開發人員可以有效地迭代透過getElementsByClassName 取得的DOM 元素，確保與Array.forEach 方法的相容性。

以上是為什麼 `getElementsByClassName` 不直接與 `forEach` 一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！