Portabilidad de nextElementSibling/nextSibling

Question

Actualmente estoy escribiendo un acordeón y me encuentro con el mismo problema descrito en nextSibling difference between IE and FF?, específicamente las diferencias entre nextSibling/nextElementSibling de Microsoft y las implementadas por todos los demás.

Por diversas razones, usar jquery no es una opción. Tampoco es conseguir todos mis usuarios de MS para actualizar a MSIE9

Actualmente estoy usando el código siguiente 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=""; 
} 

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

¿Pero es probable que esto tenga efectos secundarios inesperados?

(soy un poco de un novato con Javascript;)

Answer 1

nextSibling verán comentarios de código HTML, así que asegúrese 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 podía pensar sería en Firefox 3 donde nextElementSibling aún no se había implementado. Por lo tanto, si admite ese navegador, deberá emular manualmente nextElementSibling. (Bastante seguro de que lo tenían implementado en FF3.5 sin embargo.)

Usted será más seguro para crear una función nextElementSibling():

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

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

Answer 2

Firefox nextSibling devuelve un espacio en blanco \ n mientras que Internet Explorer no lo hace.

Antes de la introducción nextElementSibling, tuvimos que hacer algo como esto:

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

Answer 3

Teniendo en cuenta las respuestas anteriores, actualmente estoy implementando de esta manera a conceder compatibilty entre 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 do/while para los navegadores que soportan nextElementSibling. Tal vez soy demasiado miedo de bucles mientras que en JS :)

Una ventaja de esta solución es 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));