好久都木有寫博客了，前面一堆坑在等着填，自己也有項目需要等着去完成，然而依舊每天都在浪，對自己表示無語。
這次記錄的是在JS中forEach遍歷DOM節點遇到的問題。
先寫一個簡單的網頁;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
</body>
<script>
var divList = document.querySelectorAll('div');
divList.forEach(function(ele){
alert(ele.innerHTML);
});
</script>
</html>
我們希望的結果是彈出三個警告框，但是這段代碼在Chrome上沒問題、IOS的Safiri上也沒問題、安卓部分瀏覽器上也沒問題，但是在IE中、在微信網頁中將會全部出現問題。這個問題不太大，但是由於部分瀏覽器有、部分瀏覽器沒有，很容易忽略。當然，目前很多都是直接用框架這個問題就不可能出現，但是一些簡單的頁面，直接用JS擼他不香麼？
出現問題的原因是什麼？按道理來講forEach是JS中Array的方法，但是使用querySelectorAll返回的類型是NodeList，可以試着打印上面divList對象就可以看到，所以NodeList沒有forEach對象，調用當然會出錯了，Chorme、Safiri瀏覽器只不過幫了一把，但是幫是情分，不幫是本分，爲了讓所有的瀏覽器都正常運行，需要修改一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
</body>
<script>
var divList = document.querySelectorAll('div');
// 這裏是NodeList
console.log(divList);
// 增加語句 將divList從NodeList轉爲Array
divList = [].slice.call(divList);
// 這裏是Array
console.log(divList);
divList.forEach(function(ele){
alert(ele.innerHTML);
});
</script>
</html>
這樣就可以在所有的現代瀏覽器上面執行了，下次有空再寫一寫爲什麼有時候在Safari中會new Date()錯誤，原因其實和這個很像，就是有的瀏覽器支持有的不支持而已！