JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

Kurt Coleman
Kurt Coleman
2,967 Points

Unable to Complete Step 1 of Javascript and the DOM Challenge Task

I am struggling to use querySelectorAll to select <li> elements under the <nav> element. Question does not allow me to alter HTML. I've done research to show me how to use the NOT operator, but I don't this that is the point of the question. HOW do I select the <li> elements under <nav>?

js/app.js
let navigationLinks = document.querySelectorAll('nav, ul:not(#gallery) li');

for (let i=0; i<navigationLinks.length; i++)  {
  navigationLinks[i].style.Color = 'red';
  console.log(`${navigationLinks[i]}`);
}
let galleryLinks;
let footerImages;
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      nav ul {
      }
      ul li {
        class='t1';
      }
    </style>

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi, Kurt Coleman! I also answered this question in this post. Again, the challenge is not asking you to pick the list items. It is asking you to pick the links. For step 1, your code should look like this:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks;
let footerImages;

If it doesn't immediately work, try pressing "Restart" on the challenge because there may be something cached somewhere.

Hope this helps! :sparkles:

additional note The HTML file should remain unchanged. Any edits to the HTML file whatsoever will cause the challenge to fail. You currently have an extra <style> that wasn't there originally.

Kurt Coleman
Kurt Coleman
2,967 Points

Jennifer, Thank you so much. I dunno why I mistook a LINK for a LIST item but I did. I've been struggling with this for TWO days!!!

But my original question remains. How would I select the List Items under Nav without modifying the HTML?

And I understand the the <a> element is a descendant of the <nav> element, but its not a DIRECT descendant. Selecting it returns all of the <li> elements kinda by default. How would I select the <li> elements under <nav> otherwise?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi again, Kurt Coleman. Actually, what is returned is something actually something "array-like" and would simply be a list of the elements that are <a> elements. The direct descendent part is sort of irrelevant for the purposes of this challenge.

If you wanted to select the list items inside the <nav> you would do document.querySelectorAll('nav li');You could also do that by chaining getElement type statements:

document.getElementsByTagName('nav')[0].getElementsByTagName('li');

That would get the first nav then get all list items that reside within that nav element.