javascript - SurroundContents() 进行更改 `live` ？

Question

实例链接@ jsfiddle & jsbin .

所以这个函数:

function symbolize(e){
    var elements = e.childNodes; // text nodes are necessary!
    console.log(elements);
    for(var i=0; i < elements.length; i++){
        t = elements[i];
        var range = document.createRange(), offset = 0, length = t.nodeValue.length;
        while(offset < length){
            range.setStart(t, offset); range.setEnd(t, offset + 1);
            range.surroundContents(document.createElement('symbol'));
            offset++;
        }
    }
}

..应该迭代每个字母并将其包装在 <symbol/> 中元素。但似乎不起作用。

所以我添加了 console.log();就在*.childNodes之后已获取，但正如您将在上面的示例站点中看到的，日志在数组的前面(!)包含 2 个意外元素。是的，正因为如此，我有一种感觉 surroundContents();使更改生效(!)。 但找不到任何相关引用

其中一个元素是空的 Text节点，另一个是我的<symbol/> 。但是，是的，这完全是意外的结果，并且扰乱了函数的其余部分。

可能有什么问题吗？

提前致谢!

更新

哦，看来Chrome上添加了元素，Firefox没有添加元素，但仍然停止了该功能。

Answer 1

Element.childNodes 确实是一个实时列表，否则不可能是这样(这意味着节点列表不正确)。最简单的解决方案是在弄乱它之前卡住(复制)它(通过围绕现有范围)。

var elements = Array.prototype.slice.call(e.childNodes, 0);

https://developer.mozilla.org/en/childNodes它的类型是 NodeList https://developer.mozilla.org/En/DOM/NodeList这些是实时列表