js dom标签遍历

最新推荐文章于 2024-04-01 14:29:13 发布

hello我的朋友

最新推荐文章于 2024-04-01 14:29:13 发布

阅读量557

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_62394372/article/details/126292247

版权

js中dom标签遍历的方法

直接上源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li>22222</li>
			<li>33333</li>
			<li>44444</li>
			<li>55555</li>
		</ul>
		<script>
			var _lis=document.getElementsByTagName("li");
			var _lis2=document.querySelectorAll("li");
			
			//第一种
			for (var i=0;i<_lis.length;i++){
				console.log(_lis[i].innerHTML);
			}
			//第二种 for of
			for (var key of _lis){
				console.log(key.innerHTML);
			}
			//第三种 for in
			//不能直接使用 需要转换为刷组
			var _lisArray=Array.from(_lis);
			for (var key of _lisArray){
				console.log(key.innerHTML);
			}
			//第四种 forEach不能直接使用
			// querySelectorAll forEach可以直接使用
			_lis2.forEach(function(item){
				console.log(item.innerHTML);
			})
		</script>
	</body>
</html>