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

相关文章
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
56 2
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
56 3
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
65 1
|
3月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
214 0
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
41 0
|
3月前
|
JavaScript
js之遍历方法
js之遍历方法
18 0
|
3月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
56 0
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)