好久都木有写博客了,前面一堆坑在等着填,自己也有项目需要等着去完成,然而依旧每天都在浪,对自己表示无语。
这次记录的是在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()错误,原因其实和这个很像,就是有的浏览器支持有的不支持而已!