¿Es este código correcto o no? Siento que debería ser

He estado aprendiendo JavaScript y me encontré con esto:

HTML:

<ul id="nav"> <li><a href="/" id="home">Home</a></li> <li><a href="/about" id="about">About Us</a></li> <li><a href="/contact" id="contact">Contact Us</a></li> </ul> 

JavaScript:

 document.getElementById("about").parentNode.setAttribute("class", "active"); document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous"); document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next"); 

pero cada vez que ejecuto este código, obtengo un "TypeError". El único que parece funcionar es document.getElementById("about").parentNode.setAttribute .

¿Es esto correcto o es una de esas cosas raras que nunca funcionan al final sin ninguna razón?

2 Solutions collect form web for “¿Es este código correcto o no? Siento que debería ser”

El problema está causado por los saltos de línea entre cada uno de los <li> nodos. Usar este HTML funcionará:

 <ul id="nav"> <li><a href="/" id="home">Home</a></li><li><a href="/about" id="about">About Us</a></li><li><a href="/contact" id="contact">Contact Us</a></li> </ul> 

Con los saltos de línea intactos, previousSibling y nextSibling es un textNode contiene el salto de línea.

Yo recomendaría usar jQuery en su lugar, usar un selector jQuery evita estos types de problemas.

El previousSibling apunta a un nodo que no es un elemento.

Puede usar previousElementSibling . Esto no es compatible con <IE9, por lo que podría hacer una function …

 var previousElementSibling = function(node) { if (node.previousElementSibling) { return node.previousElementSibling; } do { node = node.previousSibling; } while (node && node.nodeType != 1); return node; }; 

jsFiddle .

Esto usará el previousElementSibling nativo si existe, de lo contrario volverá a hacer loops sobre los hermanos anteriores hasta que encuentre un nodo que sea un elemento. Si no existe ninguno, devuelve null , al igual que la propiedad previousElementSibling .

  • ¿Cómo implemento correctamente la manipulación DOM en Angular?
  • Cómo get / configurar la URL de la página actual (que funciona en las versiones de space-time-browsers)
  • Cómo get el nodo de text con Dojo JS
  • Vincular "inserción en evento DOM" para elemento aún no agregado
  • ¿Número máximo de identificadores de elemento que desea en una página?
  • Manejo de imágenes desde XMLHttpRequest (con HTML y Javascript)
  • Cuál es la diferencia entre document.getElementById ("test"). Value y document.getElementById ("test"). InnerHTML
  • en javascript, controlando manualmente el order de los oyentes del evento
  • ID vs UniqueID vs ClientID vs UniqueClientID vs StaticClientID?
  • ¿Hay alguna manera de boost el índice z del elemento combinado en 1, sin iteración?
  • Seleccionar text de div - la manera no obvia
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.