JavaScript 中的 ParentNode 和 previousSibling
Posted
技术标签:
【中文标题】JavaScript 中的 ParentNode 和 previousSibling【英文标题】：ParentNode and previousSibling in JavaScript 【发布时间】：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>
但是当我点击我的文本框时，什么都没有发生。
我该如何解决这个问题？
【问题讨论】：
删除标签之间的空格和换行符，或者重复直到找到另一个元素。 【参考方案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 不起作用。我的意思是 - 如果它在给出的示例中不起作用，为什么这本书的作者首先会开出它......？以上是关于JavaScript 中的 ParentNode 和 previousSibling的主要内容，如果未能解决你的问题，请参考以下文章
如果不是直接字段，则 Javascript 表单元素 id parentNode
javascript：ParentNode 接口，ChildNode 接口