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

David Donohue
David Donohue
1,110 Points
Posted by David Donohue
David Donohue
1,110 Points

FRUSTRATED!!!!!!!!!!

I can't figure out challenge 2 out. Selecting all the links in thet unordered list with the ID gallery. I've tried all of the following:

let galleryLinks = document.querySelectorAll('gallery li a') let galleryLinks = document.querySelectorAll('gallery li') let galleryLinks = document.querySelectorAll('gallery a')

If I try to use any other method besides querySelectorAll i get an error that says task one is no longer working....

js/app.js 
let navigationLinks = document.querySelectorAll('nav ul li a');
let galleryLinks = document.querySelector('gallery li a');
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>

3 Answers

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

You need # before gallery because it is an id and you are using a general method to search for the elements. Also, you don't need the 'li' reference, so in the end its:

let galleryLinks = document.querySelectorAll('#gallery a')

Carlos Fernández-Tejeda García
Carlos Fernández-Tejeda García
4,051 Points
Carlos Fernández-Tejeda García
Carlos Fernández-Tejeda García
4,051 Points

Hi all.

I had the same problem with this task, and thanks to Timothy´s help I have been able of overcome it and understand the problem´s reason

. I am not an expert, David, but after making some proofs, I can say that with a general method you have to use #for id´s , . for classes and string tags for nested elements.

Greatings!

David Donohue
David Donohue
1,110 Points
David Donohue
David Donohue
1,110 Points

Hey Carlos, thanks for the reply and information!!

David Donohue
David Donohue
1,110 Points
David Donohue
David Donohue
1,110 Points

Thanks Timothy! So when you're using a general method like querySelector or querySelectorAll and you want to access an element by ID or Class you have to use the # or . respectively otherwise if your just accessing by tag name you just use 'tagname' and then you can string tags for nested elements, separated by a space for each layer? Am I understanding that correctly?

Tim Acker
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

Yes. When you are using a specific method like document.getElementById(id) or document.getElementsByClassName(name), javascript assumes you a passing either an id or class name, so the # and . are redundant. However, when you are using a general method like querySelector(selector), you need to be clear what you are passing to the method since you can include ids, classes, tags, etc. separated by spaces depending on how specific you need to be to gain access to the element in the DOM.