Array.forEach for NodeList

Javascript 裡面有個很實用的功能 forEach,跟其他語言的 for-each 一樣,你可以不需要 index 的狀況把陣列裡面的 object 一個個的丟出來,用法如下:

1
2
3
4
var arr = [1, 2, 3, 4, 5, 6];
arr.forEach(function(num) {
  // do something...
});

但是有個小問題,當你用 document.getElementsByTagName() 或是 document.querySelectorAll() 的時候會回傳 HTMLCollection 或是 NodeList因為不是 Array 的關係所以無法使用 forEach 操作。

但我已經回不去用 index 做 loop 的方式了!MDN 上面很貼心地跟你說要如何透過 Array 的 prototype 操作 NodeList 與 HTMLCollection:

1
2
3
4
var elements = document.getElementsByTagName('a');
Array.prototype.forEach.call(elements, function(a) {
    msg.innerHTML += a.innerHTML + '<br>';
});

你也可以直接在 jsFiddle 上面跑跑看。