JavaScript中的ParentNode和previousSibling
Jac*_*123 4 html javascript dom
我正在读一本书来学习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>
但是,当我点击我的文本框时,没有任何事情发生.
我该如何解决这个问题？
某些浏览器在DOM元素之间插入空格请
阅读以下链接中的Notes部分
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()") - 在此处和此处进行讨论.使用事件监听器
如果您使用检查器检查 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 开发人员工具中的外观：
| 归档时间： |
|
| 查看次数： |
5595 次 |
| 最近记录： |