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 Jonathan Riggs
Jonathan Riggs
2,589 Points

I'm having trouble figuring out if I need to modify index.html so I can use querySelectorAll() and querySelector()

I know how to use both of the query selectors but I'm having issues with identifying which part of the html document I need to use for js file.

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

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Jonathan. There is no need to change index.html. 2 reasons.

1: Both of these (querySelectorAll() and querySelector()) 'COULD' be used with index.html as it stands. 2: As a general rule with these Treehouse Challenges, they only expect you to edit the files they specify, and none of the others.

So back to your proposed options, Challenge 1 mentions ...select all links in the nav element and assign them to.... If you examine the index.html, you can see there are 3. If you were to use querySelector(), this will only return the first match, so querySelectorAll() is the way to go.

So what to put inside the brackets? Why not copy the index.html file and save it to your computer hard drive. Now open it in your Chrome browser and open your devtools console. Don't worry that it won't display nicely because various css files are missing.

In the console type let navigationLinks = document.querySelectorAll('nav');, now type navigationLinks and you see (click the triangle) that the single 'nav' element has been found with length 1.

Refresh the browser and type let navigationLinks = document.querySelectorAll('a');, and type navigationLinks again and now you will find all 8 links on the page.

So how to combine these 2 searches to find just the 3 links within the nav element? The contents of the brackets must be a valid 'CSS Selector' string so take a look at this link...

https://www.w3schools.com/cssref/sel_element_element.asp

...it describes how you can find every 'p' element within a 'div' element. We are interested in finding every 'a' element within a 'nav' element. Slam Dunk?