Question

链接到实时示例@ jsfiddle＆amp; 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这些是实时列表

surroundContents（）更改`live`？

更新

1 个答案: