通过在 DOM 中添加元素的无限循环

Question

不寻找使用框架 XXX 答案

此问题并非旨在通过框架找到实用的解决方案。用使用framework XXX回答，或者这在framework XXX里这么简单，或者为什么不用这个framework XXX？？？不回答问题。

我有一个要在页面加载后运行的函数：performShim。此函数遍历 DOM 中所有带有 span 标签的元素，检查它们是否有 className 或 shim，如果有，则调用 shim，将匹配元素的引用传递给它。

我的目标是添加另一个包含iframe 的span 到传递给shim 的元素。

使用到目前为止我编写的代码，我能够追加 到元素的父级就好了。但是，如果我注释掉 append 行并尝试使用 prepend 行，浏览器可能会陷入无限循环。

这对我来说并不明显。

function shim( element ) {      
    var iframe = document.createElement('iframe');
    iframe.setAttribute( 'frameborder', '0' );
    iframe.setAttribute( 'scrolling', 'no' );
    iframe.setAttribute( 'align', 'bottom' );
    iframe.setAttribute( 'marginheight', '0' );
    iframe.setAttribute( 'marginwidth', '0' );
    iframe.setAttribute( 'src', "javascript:'';" ); 

    var span = document.createElement('span');
    span.appendChild(iframe);


    //element.parentNode.insertBefore(span,element); //causes infinite loop?

    element.parentNode.appendChild(span); //this line works OK

    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'inline';
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;

    iframe.style.width = (width-6) + 'px';
    iframe.style.height = (height-6) + 'px';

}   

function performShim() {
    var children = document.getElementsByTagName("span");   
    for( var i = 0; i < children.length; i++ ) {
        if( children[i].className == "shim" ) {
            shim(children[i]);  
        }
    }
} 

Answer 1

NodeList（例如document.getElementsByTagName 返回的那个）通常是一个实时列表——您对DOM 所做的更改也会显示在其中。因此，每次您在当前元素之前添加 span 时，都会将列表扩展一个元素并将当前元素移动一个元素，下一次迭代会将您返回到刚刚完成的节点。

您有几个简单的解决方法...

• 当你添加一个节点时撞倒计数器。（丑陋，如果你最终添加了一些东西而不是span，你最终会跳过节点并且它赢了'不明白为什么。）

• 将列表复制到数组并遍历数组。您可以使用类似
  children = [].slice.call(children, 0);（更常见）或
  children = Array.apply(window, children);。

• 使用document.querySelectorAll，它会返回一个不活跃的NodeList。 （即使它是实时的，在这种情况下，您也可以选择 'span.shim'，插入的 span 无论如何都不会显示在其中。）

• 向后迭代（从 children.length - 1 到 0）。