JavaScript HTMLCollection / NodeList 轉 Array 的方法
如果習慣用 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];