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這些是實時列表