关于forEach遍历DOM

最新推荐文章于 2024-07-25 09:29:51 发布

dutong0321

最新推荐文章于 2024-07-25 09:29:51 发布

阅读量1.7k

点赞数

分类专栏：编程世界文章标签： dom forEach NodeList

本文链接：https://blog.csdn.net/dutong0321/article/details/105586650

版权

编程世界专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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

dutong0321

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于forEach遍历DOM

好久都木有写博客了，前面一堆坑在等着填，自己也有项目需要等着去完成，然而依旧每天都在浪，对自己表示无语。这次记录的是在JS中forEach遍历DOM节点遇到的问题。先写一个简单的网页;<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title...
复制链接

扫一扫

专栏目录