JavaScript 中的 ParentNode 和 previousSibling答案

【问题标题】：ParentNode and previousSibling in JavaScriptJavaScript 中的 ParentNode 和 previousSibling
【发布时间】：2014-01-13 04:05:25
【问题描述】：

我正在关注一本书来学习 JavaScript，它似乎有编码错误，因为我所关注的似乎不起作用。这是我所拥有的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Examples of moving around in the DOM using native JavaScript methods</title>
    <meta charset="UTF-8">

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="css/show.css">
</head>
<body>

<!-- Let's get the parent element for the target node and add a class of "active" to it -->
<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>
<input type="button" onclick="targetClass()" value="Target the Class"/>
<input type="button" onclick="prevNextSibling()" value="Target Next and Previous Sibling"/>

<script src="js/js.js"></script>
</body>
</html>

JavaScript：

// This block of JavaScript obtains the parent element
// target the "about" link and apply a class to its parent list item
function targetClass()
{
    document.getElementById("about").parentNode.setAttribute("class", "active");
}
// This block of code adds a Class to Previous and Next Sibling Nodes
function prevNextSibling()
{
    // get "about" parent, then its previous sibling and apply a class
    document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous");
    // get "about" parent, then its next sibling and apply a class
    document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
}

根据本书，我应该得到的生成 HTML 的输出是：

<ul id="nav">
<li class=" previous" ><a href="/" id="home">Home</a></li>
<li class=" active" ><a href="/about" id="about">About Us</a></li>
<li class=" next" ><a href="/contact" id="contact">Contact Us</a></li>
</ul>

但是当我点击我的文本框时，什么都没有发生。

我该如何解决这个问题？

【问题讨论】：

删除标签之间的空格和换行符，或者重复直到找到另一个元素。

标签： javascript html dom

【解决方案1】：

如果您使用检查器检查 DOM，您会看到 li 元素之间存在空文本节点。要解决此问题：

// get "about" parent, then its previous sibling and apply a class
document.getElementById("about").parentNode.previousSibling.previousSibling.setAttribute("class", "previous");

// get "about" parent, then its next sibling and apply a class
document.getElementById("about").parentNode.nextSibling.nextSibling.setAttribute("class", "next");

更新：实际上，我只看到了使用 IE 工具的空文本节点，而不是 FF 或 Chrome。

以下是它们在 IE 开发人员工具中的外观：

【讨论】：

嗨，谢谢，因为我还在学习 JS，你能解释一下你指的是哪些空文本节点吗？
我添加了 IE 开发者工具显示的快照。我比我更喜欢 Kaushik Bhat 的解决方案。

【解决方案2】：

某些浏览器会在 DOM 元素之间插入空格
阅读以下链接中的备注部分
https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling

解决方案是使用 prevElementSibling 和nextElementSibling。这会选择下一个同类型的兄弟

可行：http://jsfiddle.net/E2k6t/1/

function targetClass()
{
   document.getElementById("about").parentNode.setAttribute("class", "active");
}
function prevNextSibling()
{
  document.getElementById("about").parentNode.previousElementSibling.setAttribute("class", "previous");
  document.getElementById("about").parentNode.nextElementSibling.setAttribute("class", "next");
}

注意

不建议在您进行实际开发时在您的 HTML 代码中使用内联 javascript (onclick="targetClass()") - 讨论 here 和 here。使用Event Listeners

【讨论】：

嗨，谢谢，但是我正在关注的教科书只提到了 previousSibling 和 nextSibling 的用法。为什么不能继续使用呢？即使使用 previousElementSibling 从实际的 html 浏览器而不是通过 jsfiddle 观察时，我也没有看到 html 代码有任何变化。这是预期的吗？
实际上我也添加了 CSS 代码，并且它在本地浏览器上也突出显示，但是仍然很好奇为什么 previousSibling 和 nextSibling 不起作用。我的意思是 - 如果它在给出的示例中不起作用，为什么这本书的作者首先会开出它......？