如果習慣用 jQuery 的朋友某天改使用 Vanilla JS 選擇器一定會先矇一下,怎麼很多方法不能使用,錯誤訊息為.forEach is not a function

例如範例

document.getElementsByTagName('h3').forEach((el)=>{
  console.log(el)
})

如果你看仔細一點其實會發現 document.getElementsByTagName 其實是 HTMLCollection 又或是 document.querySelectorAll('h3') 會給你 NodeList

HTMLCollection 與 NodeList 差別

那你會問兩個差別在哪?簡單來說 HTMLCollection 會是隨著 DOM 改變而一起變動,NodeList 則不一定,蛤!?舉個例子

let mainDOM = document.getElementById('#main')
let nodeListDivs = document.querySelectorAll('.user')
let htmlCollectionDivs = document.getElementsByClassName('user')

nodeListDivs.length //4
htmlCollectionDivs.length //4

let newDiv = document.createElement('div');
newDiv.className = 'user'
mainDOM.appendChild(newDiv)

nodeListDivs.length //=> 4
htmlCollectionDivs.length //=> 5

轉陣列的方法

要將他們轉換為 Array 有以下幾種方式,使用上要記得注意一下瀏覽器兼容性

var arr = Array.prototype.slice.call( htmlCollection )
var arr = [].slice.call(htmlCollection);
// es6
var arr = Array.from(htmlCollection);
var arr = [...htmlCollection];

參考資料

HTMLCollection, NodeList and array of objects

Facebook 功能:

Summary
JavaScript HTMLCollection / NodeList 轉 Array 的方法
Article Name
JavaScript HTMLCollection / NodeList 轉 Array 的方法
Description
使用 javascript 經常會使用選擇器不管是 querySelectorAll 還是 getElementsByClassName 會得到 HTMLCollection 與 NodeList 可是 array 的方法都無法使用,這個時候你就必須用其他的方法將他們轉為 array 以便後續使用。
Author
Publisher Name
bonze