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

Question

我正在尝试开发一个嵌入式小部件。用户将在其页面中包含一个 anchor 标记和一个 javascript，它将呈现内容。类似于嵌入式推文。

<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>

从 widget.js 中，我将使用 class="my-widget" 获取所有元素，并用 iframe 替换。

widgets.js

!function(global, document) {
    global.MyWidgets = global.MyWidgets || {};

    for(let widgets = document.getElementsByClassName('my-widget'), i = 0; i < widgets.length; i++) {
        console.log(widgets)
        let element = widgets[i];
        let span = document.createElement('span');

        span.innerHTML = "Changed from widget " + i;
        element.parentNode.appendChild(span);
        element.parentNode.removeChild(element);
    }

}(window, document);

问题是，当我删除元素时，循环也会运行更短的数字。例如，如果有两个带有 my-widget 类的元素，则在第一次运行循环后，将删除一个元素，并且循环仅运行一次。如何替换所有元素？

Answer 1

这是因为 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++) {

或者如果您不需要 i (您似乎只是使用它来获取元素并用于演示目的)，您可以将 for-of 与NodeList 现在(在大多数平台上； this answer 为其他平台提供了填充):

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