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/