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 Aliza Miller
Aliza Miller
2,720 Points

Selecting the "gallery" using document.getElementsById()

I am trying to figure out how to select the <li> nodes that are in html.index which are part of the unordered list with id="gallery".

I have tried all of the following: document.getElementsByName("gallery"); document.getElementById("gallery"); document.getElementById("#gallery"); document.querySelectorAll("section ul li")

Thank you in advance!

js/app.js 
let navigationLinks = document.querySelectorAll("nav a");
let galleryLinks = document.getElementsById("gallery");
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>
Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

Wouldn’t it be easier to give them a class and then use querySelectorAll?

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

This challenge doesn't allow any changes to the HTML.
But with the right selector, you can still use "querySelectorAll" without making any changes to the HTML.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

There's no "getElementsById (plural) function, there's only "getElementById" (singular) to get the one element with the unique ID.

Also, the "gallery" isn't the final target. The instructions ask you to get the links in the gallery. One way to do this would be to chain an additional selector function:

let galleryLinks = document.getElementById("gallery").getElementsByTagName("a");

Another way would be to create a descendant selector and use "querySelectorAll" like you did for task 1.

Aliza Miller
Aliza Miller
2,720 Points

Thank you for the comprehensive answer!