JavaScript遍历标签(遍历DOM数组)

344 阅读1分钟

很多时候我们经常会同时操作多个DOM对象,此时,可以使用循环来遍历DOM数组。

假如我们有这样的需求:
把所有的p标签的字体变为蓝色,字体大小为25px
把列表的奇数行的颜色变为红色

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>这是第一个p标签</p>   
		<p>这是第二个p标签</p>
		<p>这是第三个p标签</p>
		<p>这是第四个p标签</p>
		<p>这是第五个p标签</p>
		<p>这是第六个p标签</p>
		
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		
		
		<script>
		    let arrp = document.getElementsByTagName('p');
		    let arrl = document.getElementsByTagName('li');
			
		    for(let i=0;i<arrp.length;i++){
		        arrp[i].style.color = 'blue';
		        arrp[i].style.fontSize = '25px';
		    }
			
			for(let i=0;i<arrl.length;i++){
				if(i%2==0){ // 下标是从0开始的,所以arrl[0]是第一行
					arrl[i].style.color='red';
				}
			    
			}
		</script>
	</body>
</html>

效果截图:
在这里插入图片描述
写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

在这里插入图片描述

加油!

共同努力!

Keafmd