关于html5:通过documentgetElementsBy和documentquerySelectorAll获取的对象长度变化

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