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 mrcruz117
mrcruz117
3,500 Points

Did we learn this in this module?

I'm taking the fullstack JS track and I don't think we covered how to select elements within an element. Could I get a video recommendation from somewhere in this track?

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

1 Answer

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hi mrcruz117,

Have you looked at the links provided in the question? They'll give you all the information you need if you're not familiar with CSS selectors:

Let me know if you get stuck or if you have any questions :)

mrcruz117
mrcruz117
3,500 Points

I’ll check it out. I’m just confused as to why I’m being referred to videos that I haven’t seen yet. Why am I being tested on something that I haven’t learned?

mrcruz117
mrcruz117
3,500 Points

The CSS video didn't help at all. How do I translate that into JS?

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

From MDN Documentation on Document.querySelectorAll():

Parameters: A DOMString containing one or more selectors to match against. This string must be a valid CSS selector string

So the parameter we give to querySelectorAll() needs to be a CSS selector string.

In the CSS Basics Descendant Selectors Video Guil starts by making a CSS selector to select all span elements that are descendants of header elements. At around the 1 minute mark he types out this rule:

header span {
    color: white;
    font-size: 26px;
}

"header span" is the CSS selector string. We can use this string in our JavaScript by giving it as a parameter:

let headerSpans = document.querySelectorAll("header span");
// assigns all <span> elements that descend from <header> elements to variable headerSpans

If we were to rewrite querySelectorAll() from the first line in your post to target li elements that descend from nav elements, it would look like:

document.querySelectorAll("nav li")

Take note that the challenge is asking for you to select the links (anchor elements, <a>), not the list items:

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

Hope this helps!