admin管理员组

文章数量:1287265

I am following a book to learn JavaScript, and it appears to have coding errors as what I am following does not appear to work. Here's what I have:

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");
}

As per the book the output of the generated HTML I should be getting is:

<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>

But when I click on my text boxes nothing is happening.

How can I fix this problem?

I am following a book to learn JavaScript, and it appears to have coding errors as what I am following does not appear to work. Here's what I have:

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");
}

As per the book the output of the generated HTML I should be getting is:

<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>

But when I click on my text boxes nothing is happening.

How can I fix this problem?

  • javascript
  • html
  • dom
Share Improve this question edited Dec 25, 2013 at 23:51 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Dec 25, 2013 at 3:58 JackSparrow123JackSparrow123 1,3802 gold badges18 silver badges24 bronze badges 1
  • Remove the spaces and newlines between your tags or repeat until you find another element. – Ja͢ck Commented Dec 26, 2013 at 0:04
Add a ment  | 

2 Answers 2

Reset to default 9

Some browsers insert white spaces in between DOM elements
Read the Notes section in the following link
https://developer.mozilla/en-US/docs/Web/API/Node.nextSibling

The solution is to use previousElementSibling and nextElementSibling. This selects the next sibling which is of the same type

This Works: http://jsfiddle/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");
}

##Note It's not remended to use inline javascript in your HTML code (onclick="targetClass()") while you are doing actual development - Discussions here and here. Use Event Listeners

If you examine the DOM with an inspector, you will see there are empty text nodes between the li elements. To work around this:

// 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");

Update: Actually, I only saw the empty text nodes using IE tools, not FF or Chrome.

Here's how they look in IE developer tools:

本文标签： htmlParentNode and previousSibling in JavaScriptStack Overflow

版权声明：本文标题：html - ParentNode and previousSibling in JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741216121a2360075.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。