明天在解决一个款式批改时,打算应用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')}