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

Austin Sarne
Austin Sarne
1,468 Points
Posted by Austin Sarne
Austin Sarne
1,468 Points

How do you select children of a specific element with querySelectorAll?

Having trouble with the first part of this challenge. I don't recall ever going over this in the videos. I tried making a div to select just those links but that doesnt seem to work either.

js/app.js 
let navigationLinks = document.querySelectorAll('div.linka');
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>
          <div class = 'linka'>
            <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>
          </div>
        </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>
Hanna Reed
Hanna Reed
3,849 Points

this is the most annoying thing about treehouse, they give you challenges on something you completely didn't go over, and they do this in just about every challenge!!!! What's the point of a challenge if we are just going to give up and look up the answer because we don't know how to do it? it's not a challenge really, it's impossible if you're new to code, which is the point of the site.

1 Answer

Katie Wood
Katie Wood
19,141 Points
Katie Wood
Katie Wood
19,141 Points

Hi there,

From the challenge text, we know that we want links, or <a> tags, that are inside the <nav> tag. Using querySelectorAll, we can do this:

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

In the querySelector methods, you can select children similarly to how you do in CSS. Hope this helps!

Austin Sarne
Austin Sarne
1,468 Points
Austin Sarne
Austin Sarne
1,468 Points

Ah, thanks! That works. So to select children elements you just add them with a space.