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

简介: JavaScript遍历标签(遍历DOM数组)

很多时候我们经常会同时操作多个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>

效果截图:

1.png

相关文章
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
19小时前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
11 5
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
4天前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树