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 William Ray Noble
William Ray Noble
22,190 Points

Need to get an element through a parent ID.

Hello, This section on the DOM has really been difficult for me to understand, it's been my second time through the lectures and I'm still not getting this right. I need to select an element through he parent ID and I can't seem to get it right. Any help would be greatly appreciated.

Thank you!

js/app.js 
let navigationLinks = document.querySelectorAll( 'nav ul a' );
let galleryLinks = document.getElementById('gallery 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" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">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>

2 Answers

Xavier Ritch
Xavier Ritch
11,099 Points
Xavier Ritch
Xavier Ritch
11,099 Points

hey bro, hang in there. Ran into the same things when learning how to traverse the DOM myself once upon a time. So this challenge tasked looked familiar. There's a discussion thread about it here https://teamtreehouse.com/community/next-select-all-links-inside-the-unordered-list-with-the-id-gallery-and-assign-them-to-the-variable-gallerylinks

Mark Sebeck
MOD
Mark Sebeck
Treehouse Moderator 38,295 Points
Mark Sebeck
Mark Sebeck
Treehouse Moderator 38,295 Points

You can only select the id using getElementById. Since you are trying to select links inside an element with an ID you will probably need to use querySelectorAll. As Xavier hang in there. Traversing the DOM is a difficult subject.