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

Risto Mcintosh
Risto Mcintosh
14,084 Points
Posted by Risto Mcintosh
Risto Mcintosh
14,084 Points

How to select elements nested within an element?

"select all links in the nav element - assign them to navigationLinks."

Maybe I'm missing something, but I tried multiples way shown in this lesson to do this with no luck.

js/app.js 
let navigationLinks);
let galleryLinks;
let footerImages;

navigationLinks;
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>

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

Using the "document.querySelectorAll()" function you can select elements using CSS selectors. In CSS you select descendant (nested) elements by writing the name of an element and then a space and then another element and so on to only select elements that are found under a certain other element. This also works with class and id selectors.

So for example to select "a" elements that are descendants of "nav" elements you type this code:

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

Having a decent knowledge of CSS selectors is quite useful when you are trying to target elements in Javascript. I recommend the article "The 30 CSS Selectors You Must Memorize" as a good resource for a long list of useful CSS selectors that can come in handy.

Don't worry though, despite the name of the article you don't actually need to memorize all of those selectors. Most people don't use all of those day to day, but they can be quite useful in certain situations. So at least being aware of them and having a resource to look at when you have forgotten them can be quite useful.

Risto Mcintosh
Risto Mcintosh
14,084 Points
Risto Mcintosh
Risto Mcintosh
14,084 Points

Thankyou! I actually tried selecting them using the "li" element. 

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

I can't believe I missed that.

Seth Miller
Seth Miller
5,851 Points
Seth Miller
Seth Miller
5,851 Points

Why do you select the "a" elements and not the "li" elements?

andren
andren
28,558 Points
andren
andren
28,558 Points

Because the challenge asks you to select the links in the nav element. The li tag is not used to mark a link but to mark list-items. To create a link in an HTML page you have to use the a (anchor) element.

If you look at the source code of this page for example you would see that both of the links in this comment are created using <a> tags.

Seth Miller
Seth Miller
5,851 Points
Seth Miller
Seth Miller
5,851 Points

Thank you for the explanation!