SurroundContents() 使更改“实时”吗？

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++;
        }
    }
}

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

因此，我在获取 *.childNodes 之后添加了 console.log();，但正如您在上面的示例站点中看到的那样，日志包含 2数组前面（！）出现意外的元素。是的，正因为如此，我有一种感觉 surroundContents(); 使更改生效（！）。 无法找到任何相关参考

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

这可能有什么问题吗？

提前致谢！

更新

哦，看来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 这些是实时列表