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 Getting a Handle on the DOM Return Elements Using CSS Selectors

Posted by koen haentjens
koen haentjens
7,343 Points

code challange js selecting elements

Challenge Task 1 of 3 In this challenge, you're going to select various elements from index.html. First, select all <a> elements inside the <nav> element and assign them to the variable navigationLinks. (HINT: Use a descendant selector to match elements that are descendants of an element.)

Bummer: Make sure that you're selecting 3 links. It looks like you've selected 1 links. app.js index.html

let navigationLinks; let galleryLinks; let footerImages; ā€‹ navigationLinks = document.getElementsByTagName("nav");

ā€‹

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

navigationLinks = document.getElementsByTagName("nav");
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Treehouse Student | 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>Treehouse Student</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="#" class="selected">Work</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="#">
              <img src="img/numbers-01.jpg" alt="The number 1 painted with colors and textures.">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="img/numbers-02.jpg" alt="The number 2 painted with various colors blended together.">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/treehouse"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/TeamTreehouse"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Treehouse Student.</p>
      </footer>
    </div>
    <script src="app.js"></script>
  </body>
</html>

3 Answers

koen haentjens
koen haentjens
7,343 Points

yes but need to select all <a> within <nav> and i can't do it

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

That's where the descendant selector comes in. As I said, it has two terms, the container and the target, separated by a space. So, for example, all images in a header would be "header img". And you can't do complex selectors like this with getElementsByTagName, which is why I suggested using a different function.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The message is slightly misleading ā€” you haven't seledted a link, you've selected the <nav> element.

A few additional hints:

  • links are implemented using anchor ("a") elements
  • a descendant selector has two terms, the container and the target, separated by a space
  • you'll need a different selector function for this kind of selector (try querySelectorAll)
koen haentjens
koen haentjens
7,343 Points
koen haentjens
koen haentjens
7,343 Points

thank you for your time