JavaScript 中的 ParentNode 和 previousSibling

Question

我正在阅读一本书来学习 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>

但是当我单击文本框时什么也没有发生。

如何解决这个问题？

Answer 1

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

解决方案是使用 previousElementSibling 和 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。使用事件监听器

Answer 2

如果您使用检查器检查 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 开发者工具中的外观：

enter image description here

JavaScript 中的 ParentNode 和 previousSibling

问题描述投票：0回答：2

2个回答

最新问题

JavaScript 中的 ParentNode 和 previousSibling

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2