JavaScript querySelectorAll 使用 forEach

發表於 | 更新於 | 分類於

我們可以使用forEach在JavaScript中輕鬆的循環數組，但是不幸的是querySelectorAll使用上沒有這麼簡單…

1
2
3
document.querySelectorAll('.module').forEach(function() {
  /* Only works in Blink browsers and Firefox 50+。 No Safari or IE/Edge support */
});

querySelectAll回傳的不是數組，是一個(non-live)的 NodeList，並不是所有Browsers都支援

目前解決的方式

1
2
3
4
5
var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(v) {
  v.style.color = "red";
});

自己在寫內部系統時(只能用IE環境開啟Orz)，是用以上的方式解決目前的問題，但是這會有hack的問題，但目前也不太想改了，維護別人Code加上IE毛特多和版本不確定等等問題 (網管會設定線上的IE版本糙)，筋疲力竭的狀況下選擇不浪費時間，能動就好 (了不起負責)
參考

可以用最傳統的方式解決

1
2
3
4
5
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

建議的是自訂方法

1
2
3
4
5
6
7
8
9
10
11
12
13
// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

// Usage:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
  console.log(index, value); // passes index + value back!
});

Firefox可以用的loop方式

1
2
3
4
5
6
7
/* Be warned, this only works in Firefox */

var divs = document.querySelectorAll('div');

for (var div of divs) {
  div.style.color = "blue";
}

這是最不推薦且危險的方式

1
2
3
4
NodeList.prototype.forEach = Array.prototype.forEach;
var divs = document.querySelectorAll('div').forEach(function(el) {
  el.style.color = "orange";
})

參考

0%