Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

How do I select all <li> children of the tag <nav>?

How do I do this?

js/app.js
let navigationLinks = document.querySelectorAll('nav');
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">
  </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>

5 Answers

This selector 'nav ul li a' worked well. Thanks a lot.

Antonio De Rose
Antonio De Rose
20,882 Points

you've been asked to select all the links in the nav element, so your start is correct, javascript works in a tree structure, to connect to the HTML, something like parent / child approach, and if you are to get to the links which is <a> under the nav links, how would you approach, make sure you go through the videos again

http://css.maxdesign.com.au/selectutorial/rule.htm read about descendant selectors and you should see a solution.

You need to select lis and you are selecting the nav itself. Change the value of your querySelectorAll() to the correct value. querySelectorAll("li");

document.querySelectorAll('li) returns all elements in the whole page. How do i filter only those in nav ?

Why is this downvoted? At least give feedback!

Antonio De Rose
Antonio De Rose
20,882 Points

as I told you earlier, your start is correct, now you have to traverse yourself to the a, you have to go by nav and then to a, otherwise, you;d be selecting for the a's that are not intended. In Javascript,for you select the child, you have to go through parent and then child and on and on, if necessary. put up a space, and to get to the next level from the root you selected your case

the below is not enough, now you have to get to the a, I have done 2, rest is for you to complete

document.querySelectorAll('nav ul')

This selector 'nav ul li a' worked. Thanks a lot.