Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Mohammad Ali
Mohammad Ali
2,979 Points

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

Mohammad Ali
Mohammad Ali
2,979 Points
Mohammad Ali
Mohammad Ali
2,979 Points

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

Antonio De Rose
Antonio De Rose
20,885 Points
Antonio De Rose
Antonio De Rose
20,885 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

Nelson J
Nelson J
7,411 Points
Nelson J
Nelson J
7,411 Points

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

Nelson J
Nelson J
7,411 Points
Nelson J
Nelson J
7,411 Points

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

Mohammad Ali
Mohammad Ali
2,979 Points

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

Nelson J
Nelson J
7,411 Points

Why is this downvoted? At least give feedback!

Antonio De Rose
Antonio De Rose
20,885 Points
Antonio De Rose
Antonio De Rose
20,885 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')
Mohammad Ali
Mohammad Ali
2,979 Points

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