通过document.getElementsBy*和document.querySelectorAll获取的对象长度变化

今天在处理一个样式修改时,打算使用js原生的方法选中元素然后修改他们的样式,然后使用了以下方法

const active:HTMLCollectionOf<Element> = document.getElementsByClassName('is-active')
for (let i = 0; i < active.length; i++) {
     active[i].classList.remove('is-active')
}

然后发现总是会漏下一个元素没有修改,查阅了mdn之后发现,HTMLCollection是一个及时的对象,会随着其他对dom的修改而及时更新。解决的思路就是将HTMLCollection转化为数组或者使用while循环来做。在这里就将两种方法都记录下来,不过我更推荐使用while循环,这种方法写的比较少,而且也不会额外去申请内存。
1)

const active:HTMLCollectionOf<Element> = document.getElementsByClassName('is-active')
const array:Element[] = Array.from(active)
for (let i = 0; i < array.length; i++) {
     array[i].classList.remove('is-active')
}

2)

const active:HTMLCollectionOf<Element> = document.getElementsByClassName('is-active')
while (active.length){
  active[0].classList.remove('is-active')
}
阅读 71

推荐阅读

主要发布一些随笔,开发中的一些思考,偶尔也会发译文。

0 人关注
3 篇文章
专栏主页