Recursive JavaScript function to walk the DOM breaks in IE8

Question

I'd held off on posting here since I don't feel I have the skill level yet to give back to the community, but this one has me totally stumped.

I have a recursive JavaScript function that appends a counter to the end of all id and name elements in a node tree. The function works in FF, Chrome, Safari, and IE9, but not IE8.

function counterAppend(nodes,counter)
{
    var newField = nodes.childNodes;
    for (var i=0;i<newField.length;i++)
    {
        var theName = newField[i].name;
        if (theName)
        {
            newField[i].name = theName + counter;
        }
        var theId = newField[i].id;
        if (theId)
        {
            newField[i].id = theId + counter;
        }

        //recursive part
        if(newField[i].childNodes.length>0)
        {
            newField[i] = counterAppend(newField[i],counter);
        }
    }
    return nodes;
}

I get the error on the line: newField[i] = counterAppend(newField[i],counter);

In debug, it says: Breaking on JS runtime error - Object doesn't support this property or method

What is different between IE8 and the other browsers, and how can I modify this to work around the error?

Maybe this may help: http://forums.devshed.com/javascript-development-115/childnodes-problem-in-ie8t-791156.html — RonaldBarzell, Dec 14 '12 at 20:19
it probably has something to do with the fact that `childNodes` gives you a [`NodeList`](https://developer.mozilla.org/en-US/docs/DOM/NodeList), not an array. — jbabey, Dec 14 '12 at 20:21
I've got similar thoughts like @jbabey. Try to convert `NodeList` to an array. [Here](http://stackoverflow.com/questions/3199588/fastest-way-to-convert-javascript-nodelist-to-array) you can find examples. For IE8 `for loop` looks as the best option. — dreame4, Dec 14 '12 at 20:50
why do you have to reaffect the return of counterAppend? Apparently you only need to change the names and ids, therefore this affectation is optional. — Sebas, Dec 14 '12 at 20:51
@jbabey - don't I need a NodeList in case the tree I'm modifying is more than a layer deep? — JSP64, Dec 14 '12 at 22:12
@user1905055 things like `.length` and `[i]` may not work with a `NodeList` on all browsers. those are behaviors of an array. — jbabey, Dec 14 '12 at 22:32
Couldn't he use a for...in? http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop — , Dec 14 '12 at 23:07

score 1 · Accepted Answer · answered Dec 14 '12 at 23:23

1

Why are you assigning the return of the function back over the newField[i]? I have no idea what you expect this to do. If the code is just modifying the ids/names you shouldn't need a return value. I should think it is this that is confusing IE, I'm not sure why it isn't confusing the other browsers...

answered Dec 14 '12 at 23:23

Pebbl

34,937
6
62
64

Works! Thanks. I didn't realize the function was affecting the original variable, vs. creating another local variable with the same name. – JSP64 Dec 15 '12 at 16:29

score 0 · Answer 2 · edited May 23 '17 at 12:21

Questions: Also, have you checked when you receive the error? How many times do you loop, if any at all, before you receive the error? Try some output statements.

Some alternative algorithms for walking the DOM: getElementsByTagName() equivalent for textNodes

Keep in mind you might be running into issues such as the below.

IE doesn't include white-space-only text nodes in the childNodes nodeList like other browsers do. I suggest you use getElementsByTagName() instead. That way you also don't have to traverse every level of nodes manually in your code.

via http://www.quirksmode.org/dom/w3c_core.html

Most browsers will correctly view the blank space between tags as a text node containing only white space characters (such as space, line-break or tab), even if the blank space is not rendered, such as a gap in between a tag and a tag or a blank gap in between
tags. However, some browsers (mainly Internet Explorer 8-, and 9+ in quirks mode) will not view this empty space as a text node at all.

via http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Recursive JavaScript function to walk the DOM breaks in IE8

2 Answers2