Portability of nextElementSibling/nextSibling

Question

I\'m currently writing an accordion and running into the same problem as described in nextSibling difference between IE and FF? - specifically differences between Microsoft\

Answer 1

Considering previous answers, I am currently implementing it this way to grant cross-browser compatibilty:

function nextElementSibling(el) {
    if (el.nextElementSibling) return el.nextElementSibling;
    do { el = el.nextSibling } while (el && el.nodeType !== 1);
    return el;
}

This way, I can avoid the do/while loop for browsers that support nextElementSibling. Maybe I'm too scared of WHILE loops in JS :)

One advantage of this solution is recursability:

//this will always works:
var e = nextElementSibling(nextElementSibling(this));

//this will crash on IE, as looking for a property of an undefined obj:
var e = this.nextElementSibling.nextElementSibling || nextElementSibling(nextElementSibling(this));

Answer 2

Firefox nextSibling returns whitespace \n while Internet Explorer does not.

Before nextElementSibling was introduced, we had to do something like this:

var element2 = document.getElementById("xxx").nextSibling;
while (element2.nodeType !=1)
{
          element2 = element2.nextSibling;
} 

Answer 3

nextSibling will see HTML code comments, so be sure to keep them out.

Other than that you should be alright since you won't have any text nodes between your tr elements.

The only other issue I could think of would be in Firefox 3 where nextElementSibling hadn't yet been implemented. So if you're supporting that browser, you'll need to manually emulate nextElementSibling. (Pretty sure they had it implemented in FF3.5 though.)

You'll be safer to create a nextElementSibling() function:

tr = tr.nextElementSibling || nextElementSibling(tr);

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