roundContents () вносить изменения "вживую"?

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 это живые списки