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 Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

Unsure how to select nested elements using JavaScript. In CSS I know it would be 'nav a' or something of the sort

But I can't seem to figure out how to do it here...

js/app.js 
let navigationLinks = document.getElementsByTagName('nav a');
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>

2 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

You aren't too far off actually, the issue is the method you are using. The getElementsByTagName method is only designed to find elements based on a single tag name, it does not accept more complex criteria. The methods you are looking for is querySelector (to select one element) and querySelectorAll (to select multiple elements).

Those method select elements based on CSS selectors. Meaning that you can use the exact same selector syntax you are used to from CSS. Including the descendant selector you use in your example.

So if you replace getElementsByTagName with querySelectorAll in your code like this:

let navigationLinks = document.querySelectorAll('nav a');

Then your code will work.

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

Thanks! Managed to figure it out in the end. Do you know if there is a way to access questions you've asked without having to wait for a response?

andren
andren
28,558 Points
andren
andren
28,558 Points

I have never posted a question personally, but the questions are posted in the "Community" section of the website. So if you click on "Community" in the black header at the top of the page you will see a list of all of the questions. If you recently asked the question it will likely be pretty close to the top. There is also a filter you can apply to only see your own posts. Look for a dropdown menu that says "Newest" close to the top of the page and change it to "My Posts" and that should filter it to only your own posts.

Once you have found your own post you can delete or edit it if you have realized something after it was posted. But ideally if an answer has been posted you should just select it as "Best Answer" and not delete it. That way it will be marked as answered and still be accessible in the future for other students who have similar questions.

Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points
Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel
8,466 Points

Thanks! And I guess you're right. I won't delete it then ^^