Question

Links to live examples @ jsfiddle & jsbin.

So this function:

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

..should iterate over every letter and wrap it in a <symbol/> element. But it doesn’t seem to be working.

So I added the console.log(); right after the *.childNodes have been fetched, but as you’ll see in the example site above, the log contains 2 unexpected elements in front(!) of the array. And yeah, because of this, I have a feeling that surroundContents(); make the changes live(!). couldn’t find any reference on this though

One of the elements is an empty Text node, the other is my <symbol/>. But yeah, this is totally unexpected result and messes up the rest of the function.

What could be wrong with it?

Thanks in advance!

Update

Oh, looks like the elements are added on Chrome, Firefox doesn’t add the elements, but still halts the function.

Answer 1

Element.childNodes is indeed a live list , it could not be otherwise (that would mean an incorrect list of nodes). The easiest solution is to freeze (make a copy of) it before you mess with it (by surrounding existing ranges).

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

https://developer.mozilla.org/en/childNodes it’s of type NodeList
https://developer.mozilla.org/En/DOM/NodeList those are live lists