3

我一直在学习 JavaScript，我遇到了这个：

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");

但每次我运行这段代码时，我都会得到一个“TypeError”。唯一一个似乎有效的是document.getElementById("about").parentNode.setAttribute.

这是正确的，还是那些最终无缘无故永远不会起作用的奇怪事情？

4

2 回答 2

4

<li>该问题是由每个节点之间的换行符引起的。使用此 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>

在换行符完好无损的情况下，previousSiblingandnextSibling是textNode包含换行符的 a。

我建议改用jQuery——使用jQuery选择器可以避免这些类型的问题。

于 2012-12-31T03:34:14.833 回答
4

previousSibling指向一个不是元素的节点。

你可以使用previousElementSibling. < IE9 不支持此功能，因此您可以创建一个函数...

var previousElementSibling = function(node) {

     if (node.previousElementSibling) {
         return node.previousElementSibling;
     }

     do {
         node = node.previousSibling;
     } while (node && node.nodeType != 1);

     return node;
};

js小提琴。

如果存在，这将使用本机previousElementSibling，否则它将回退到循环先前的兄弟姐妹，直到找到一个节点是一个元素。如果不存在，则返回null，就像previousElementSibling属性一样。

于 2012-12-31T03:34:21.290 回答