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

Nick Ghys
Nick Ghys
8,918 Points
Posted by Nick Ghys
Nick Ghys
8,918 Points

How can use the document.querySelectorAll('?') method to reach all the grandchildren of the <nav> tag?

I'm trying to select the three links that are shown below with the document.querySelectorAll() method. How can I select them ? If I use the the selection by tag I have a return value of five elements. I only want to select these three :
<nav> <ul> <li> <li> <li> </ul> </nav>

Thanks for your help.

Nick

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

4 Answers

Adam N
Adam N
70,280 Points
Adam N
Adam N
70,280 Points

You don't want to select the li elements. You want the links. How would you select the links in the nav element with css? You'd use the same syntax here.

Let me know if this helps here

Nick Ghys
Nick Ghys
8,918 Points
Nick Ghys
Nick Ghys
8,918 Points

Hi Adam, Yes I want to select the three links. What should I put in the document.querySelectorAll('?') Cheers, Nick

Nick Ghys
Nick Ghys
8,918 Points
Nick Ghys
Nick Ghys
8,918 Points

Alright...Even if this wasn't explained in the course, you'll find the answers to my question here :

option 1: let navigationLinks=document.querySelector('nav').getElementsByTagName('a');

So we're basically applying the getElementsByTagName() method to the result of the document.querySelector() method. So I don't know exactly what the document.querySelector('nav') selects here, but I do know the first nav element is selected since this method returns the first element it encounters. Then we apply the getElementsByTagName('a') method to the result which will select the three elements with the tag 'a' since the three links have this tag.

OR

option 2: let navigationLinks=document.querySelector('nav').querySelectorAll('a');

Here we're applying the querySelectorAll() method to the result of the document.querySelector() method. So I don't know exactly what the document.querySelector('nav') selects here, but I do know the first nav element is selected since this method returns the first element it encounters. Then we apply the querySelectorAll('a') method to the result which will select all the elements with the tag 'a'.

Hope this will help others.

Nick

Nick Ghys
Nick Ghys
8,918 Points
Nick Ghys
Nick Ghys
8,918 Points

For your information this works too:

option 3: let navigationLinks=document.querySelector('ul').getElementsByTagName('a');

OR

option 4: let navigationLinks=document.querySelector('ul').querySelectorAll('a');

Cheers, Nick

Axel Perossa
Axel Perossa
13,930 Points
Axel Perossa
Axel Perossa
13,930 Points

Remember that this method accepts regular css selectors, so you could do it using a descendent selector: querySelectorAll("ul a") or something like that. That way you get rid of the second use of the method and the performance will be a bit better.

Nick Ghys
Nick Ghys
8,918 Points
Nick Ghys
Nick Ghys
8,918 Points

Yes, I just noticed that this code works : document.querySelectorAll('nav ul a'); Thanks, Nick