在DOM元素數組上調用內置函數

Question

這是Ive第二次遇到這個&這次決定提出一個問題，而不是尋找替代解決方案。

場景： 我們從document.getElementsByClassName獲取元素列表。返回的列表是一個數組。爲什麼我不能在這個返回的數組上使用像map, find, filter這樣的內置數組函數？

https://jsfiddle.net/xbka5pt2/

<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 

的Javascript：

let list = document.getElementsByClassName("classy"); 
console.log(list); 
// the following returns a 'typeError': 
// "list.map is not a function" 
list.map(function(ele){ 
    console.log("ele is", ele); 
}); 

我得到的錯誤：TypeError: list.map is not a function當我嘗試&使用地圖功能列表陣列上。謝謝。

Answer 1

這是因爲getElementsByClassname返回一個HtmlCollection。這裏是一個工作的解決方案：

let list = document.getElementsByClassName("classy"); 
console.log(list); 

Array.prototype.map.call(list, function(ele) { 
    console.log("ele is", ele); 
}); 

通過調用從列表作爲參數Array的原型可以映射每個函數。另一種可能性是與[]算這樣稱呼它：

[].map.call(list, function (el) {...});