ejemplo - nextsibling javascript

Portabilidad de nextElementSibling/nextSibling

Question

Actualmente estoy escribiendo un acordeón y me encuentro con el mismo problema que se describe en nextSibling diferencias entre IE y FF? - específicamente las diferencias entre nextSibling / nextElementSibling de Microsoft y la implementada por todos los demás.

Por varias razones, usar jquery no es una opción. Tampoco todos los usuarios de MS se actualizan a MSIE9

Actualmente estoy usando el siguiente código para solucionar el problema:

// tr is a TR doc element at entry....
while (nthRow--) {
     // for Chrome, FF tr=tr.nextElementSibling; for MSIE...tr=tr.nextSibling;
     tr=tr.nextElementSibling ? tr.nextElementSibling : tr=tr.nextSibling;
     if (!tr || tr.nodeName != "TR") {
            break;
     }
     tr.style.display="";
}

Lo que parece hacer lo que espero en MSIE6, FF y Chrome, es decir, los elementos nthRow TR debajo del TR inicial se hacen visibles (anteriormente style.display = "none").

Pero, ¿es probable que esto tenga efectos secundarios inesperados?

(Soy un poco novato con Javascript;)

Answer 1

Considerando las respuestas anteriores, actualmente lo estoy implementando de esta manera para otorgar compatibilidad con varios navegadores:

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

De esta manera, puedo evitar el bucle do / while para los navegadores que admiten nextElementSibling. Tal vez tengo demasiado miedo de los bucles WHILE en JS :)

Una ventaja de esta solución es la recursividad:

//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 devuelve espacios en blanco / n, mientras que Internet Explorer no lo hace.

Antes de que se introdujera nextElementSibling, tuvimos que hacer algo como esto:

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

Answer 3

nextSibling verá los comentarios del código HTML, así que asegúrate de mantenerlos fuera.

Aparte de eso, debería estar bien, ya que no tendrá ningún nodo de texto entre sus elementos tr .

El único otro problema que se me ocurrió sería en Firefox 3 donde nextElementSibling aún no se había implementado. Por lo tanto, si admite ese navegador, deberá emular manualmente el siguiente elemento de nextElementSibling . (Aunque estoy bastante seguro de que lo tenían implementado en FF3.5).

Será más seguro crear una función nextElementSibling() :

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

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