你可能不知道的JavaScript 遍历DOM的几种方法

最近看到一篇关于前端优化方面的文章,里面提到了几点对DOM遍历操作的优化,文章只是一笔带过,并没有深入的讲解。

其中提到了几个优化的手段,乍一看似乎没见过,然后再仔细想想,其实无论是犀牛书还是红宝书都有对此的描述,只是当初年轻时看书看到这里,觉得好像没什么屁用,将之当成可有可无的东西随便扫一眼就跳过了,现在既然碰上了,那就好好回顾一下吧。

常用遍历方法

对于 DOM的遍历,大部分情况下,都是直接使用选择器,选取到需要的DOM,然后对其进行遍历,并在遍历的同时进行各种筛选等操作。

例如下述 HTML

<ul class="box">
  <li class="li_1">1</li>
  <li class="li_2">2</li>
  <li class="li_3">3</li>
  <li class="li_4">4</li>
  <li class="index_5">
    <ul class="box1">
      <li class="ll1">li1</li>
      <li class="ll2">li2</li>
      <li class="ll3">li3</li>
    </ul>
  </li>
</ul>

对其中的 li元素进行选取遍历操作:

let eleList = document.querySelecto
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值