javascript - 这段代码对不对？我觉得应该是

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 选择器可以避免这些类型的问题。