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

Renee Versteegen
Renee Versteegen
16,408 Points
Posted by Renee Versteegen
Renee Versteegen
16,408 Points

Practice Selecting Elements - challenge task 1

Task 1 of this challenge asks you to select all links in the nav element and assign them to navigationLinks. The accepted answer is: let navigationLinks = document.querySelectorAll('nav a');

I did:

let navigationLinks = nav.getElementsByTagName('a'); which seems to work just as well as the suggested answer when I test it, and there are similar examples in the MDN documentation, but the challenge gives an error message, saying 'nav is not a variable'. (I know it isn't, it's an element, but the method works on any element according to MDN; it says: "The subtree underneath the specified element is searched, excluding the element itself.")

So now I'm curious as to why my solution would be considered wrong, or maybe just unusual.

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

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You wrote, "but the method works on any element according to MDN". This is true, but the code still needs a variable to serve as a reference to the element.

You could do something like this first, to establish the nav variable as a reference to the nav element:

let nav = document.getElementsByTagName('nav')[0];

If you add that as the top line, your code will pass the challenge.

Renee Versteegen
Renee Versteegen
16,408 Points
Renee Versteegen
Renee Versteegen
16,408 Points

Hey thanks for your answer, but I tested my code and it also works they way I wrote it. I don't see any difference in behavior when I use my solution or when I use Treehouse's suggested answer. And there's a similar example on this MDN page https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName where they call the method directly on the table element. var cells = table.getElementsByTagName("td"); I guess this is just an unusual way of doing this then. :)

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

In the MDN page example, the line just above the one you quoted is:

var table = document.getElementById("forecast-table");

This establishes the "table" variable just like the line I gave you above would establish the "nav" variable. In both cases these lines are needed to create a variable to serve as a reference to the element.

But you're right that using getElementsByTagName twice or using querySelectorAll once both generate the same result and perform exactly the same. The latter approach has two advantages unrelated to functionality:

  • it makes the code slightly more concise
  • the intent of the code may be more quickly understood when read

And your method is certainly not unusual, you might even call it the "classic" approach.

Renee Versteegen
Renee Versteegen
16,408 Points
Renee Versteegen
Renee Versteegen
16,408 Points

It's perfectly clear now. thanks very much :)