javascript - document.getElementById("Three").parentNode.previousSibling.setAttribute 给我问题

Question

使用 Chrome 我试图定位列表的另一个元素

<ul>
<li><a href="#" id="One">One</a></li>
<li><a href="#" id="Two">Two</a></li>
<li><a href="#" id="Three">Three</a></li>
<li><a href="#" id="Four">Four</a></li>
<li><a href="#" id="Five">Five</a></li>
</ul>

所以这行得通，

document.getElementById("Three").parentNode.setAttribute("class", "active");

然而这并没有，我很困惑为什么。

document.getElementById("Three").parentNode.previousSibling.setAttribute("class", "active");

这是我在控制台中遇到的错误：

Uncaught TypeError: Object #<Text> has no method 'setAttribute' 

Answer 1

作为父元素的前一个兄弟<li>是文本节点（包含换行符），它没有setAttribute()方法。

如果您从元素之间删除任何空白，则该 JS 行将起作用，如下所示：

<li><a href="#" id="Two">Two</a></li><li><a href="#" id="Three">Three</a></li>

演示：http: //jsfiddle.net/HLGJE/

但是你可能不希望你的标记都在一行上，所以你可以尝试这样的事情来跳过文本节点：

var prev = document.getElementById("Three").parentNode.previousSibling;
while(prev.nodeType == 3)
    prev = prev.previousSibling;
prev.setAttribute("class", "active");

演示：http: //jsfiddle.net/HLGJE/2/