Question

我一直在学习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。

这是正确的，还是一种奇怪的东西，最终无缘无故？

Answer 1

问题是由每个<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>

如果换行符不变，则previousSibling和nextSibling是包含换行符的textNode。

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

Answer 2

previousSibling指向的节点不是元素。

您可以使用previousElementSibling。＆lt;不支持此功能。 IE9，所以你可以创建一个函数......

var previousElementSibling = function(node) {

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

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

     return node;
};

jsFiddle

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

这段代码是否正确？我觉得应该是这样

2 个答案: