JavaScript - Traversing the HTML DOM using childNodes causes errors in Non IE browsers

Answer 1

It's because you're using childNodes and whitespaces in the DOM are considered to be text nodes by Firefox et. al but not IE

See this answer for an explanation

My suggestions

1.Set up some wrapper functions that ignore any nodeType other than 1 (ELEMENT_NODE) to do DOM traversing. Something like

function child(elem, index) {
    // if index is not supplied, default is 1 
    // you might be more comfortable making this 0-based
    // in which case change i initial assignment value to 0 too
    index = index || 1; 
    // get first child element node of elem
    elem = (elem.firstChild && elem.firstChild.nodeType != 1) ?
               next(elem.firstChild) :
               elem.firstChild; 
    // use the index to move to nth-child element node             
    for(var i=1; i < index;i++) {
        (function() {     
            return elem = next(elem);         
        })();        
    }
    return elem;
}

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
return elem;                
}

and use like so - Working Demo - (Code at the bottom of the answer for reference)