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

yousif alyousif
yousif alyousif
2,322 Points
Posted by yousif alyousif
yousif alyousif
2,322 Points

stuck with this question !!

any idea about how can i solve this problem the challenge task: In the following tasks you'll be required to select various elements on the index.html page. In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

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

5 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

Notice that the challenge is asking for you to retrieve the navigation links, not the html5 navigation layout tag. Remember in HTML links are those a tags.

The links are setup like so

nav
  ------ ul
          ------ li
                   ---- a

So we will use the CSS child selectors in order to get those a tags, like so (though you can use any selector you want):

let navigationLinks = document.querySelectorAll("nav > ul > li > a");
yousif alyousif
yousif alyousif
2,322 Points
yousif alyousif
yousif alyousif
2,322 Points

dam that was a good answer, thanks for your nice explanation and time

Karen Thrasher
Karen Thrasher
5,269 Points

Good answer, thank you!

Max Botez
Max Botez
5,146 Points
Max Botez
Max Botez
5,146 Points

That is really pro answer but how I suppose to know that i need to use this way? 

('nav > ul > li> a')

Did I missed something? If yes could you point me in the section, please?

Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

Yeah, that should be good.

Understanding why and when you should use certain css selectors is basically just knowledge of css. Team Treehouse has a great selection of CSS tutorials for you to utilize.

https://teamtreehouse.com/library/topic:css

james mchugh
james mchugh
6,234 Points
james mchugh
james mchugh
6,234 Points

I will try that. I don't remember the video using the greater than symbol to navigate to links. thank you for your help

Ravi Challa
Ravi Challa
7,036 Points
Ravi Challa
Ravi Challa
7,036 Points

Guess we can directly reach the child like let navigationLinks = document.querySelectorAll('nav a');

sai nikhil
sai nikhil
11,230 Points
sai nikhil
sai nikhil
11,230 Points 
let navigationLinks = document.querySelectorAll('nav a');
james welte
james welte
6,773 Points
james welte
james welte
6,773 Points

thx that really helped me i like that answer it is so simplified

Raphel Banda
Raphel Banda
6,864 Points
Raphel Banda
Raphel Banda
6,864 Points

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

try this one