Javascript 替换属于特定类的所有元素

我正试图开发一个嵌入式小部件。用户将在他们的页面中包含一个

锚定

标记和一个javascript，它将呈现内容。类似于嵌入式tweet

<a href="http://localhost:3000/user/13"
        target="_blank"
        class="my-widget" 
        data-widget-type="profile" 
        data-widget-identifier="id" 
        data-identifier-value="13"
   >Sayantan Das</a>
</div>
<script src="//localhost/my-widget/js/widget.js" async ></script>

---

问题是，当我删除元素时，循环的运行次数也会缩短。例如，如果有两个元素具有类

my widget

，则在第一次运行循环后，一个元素被删除，循环只运行一次。如何替换所有元素？

这是因为

getElementsByClassName

返回一个live

HTMLCollection

；当您从DOM中删除

class=“my widget”

元素时，它也会从集合中删除

要么在集合中反向工作（因此从末尾删除，这不会影响之前的集合），要么使用

querySelectorAll（“.my widget”）

，它返回快照

NodeList

，而不是实时

HTMLCollection

反向工作：

for(let widgets = document.getElementsByClassName('my-widget'), i = widgets.length - 1; i >= 0; i--) {

改用qSA：

for(let widgets = document.querySelectorAll('.my-widget'), i = 0; i < widgets.length; i++) {

---

使用

document.querySelectorAll

查看小部件的长度

谢谢，我不知道。并且

querySelectorAll

工作正常。你能解释一下你所说的“通过收集反向工作”是什么意思吗？@SayantanDas-你在我演示时评论道。基本上：

i=widgets.length-1；i>=0；我--

。请编辑您的答案，并多做一点心思和工作；）答案是可以的，但有点短，并没有好的例子。

for(let widgets = document.querySelectorAll('.my-widget'), i = 0; i < widgets.length; i++) {

for (const element of document.querySelectorAll('.my-widget')) {
    // ...and remove the `let element = ...` line