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

Austin Sarne
Austin Sarne
1,453 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
18,968 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,453 Points

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