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

Abhijit Das
Abhijit Das
5,022 Points
Posted by Abhijit Das
Abhijit Das
5,022 Points

what are the differences between getElementById and querySelectorAll?

let navigationLinks = document.getElementsByTagName('nav ul li a'); let navigationLinks = document.querySelectorAll('nav a'); what are differences between these two? Thank you in advance.

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

There are two main differences.

  1. getElementById returns a single element, but querySelectorAll returns a collection of elements
  2. getElementById takes just the id name as the argument, but querySelectorAll takes a CSS-style selector which may contain a mix of tag names, class names, an id name, and various combinators.

I should also point out that your example of "document.getElementsByTagName('nav ul li a')" is not valid because the getElementsByTagName method takes only a single tag name as the argument. It's also not the same thing as getElementById.

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

Thank you....that question i was asked kinda typo error, actually i want to get clear between geteElementsByTagName and querySelectorAll, it's much more clear now, I heard that querySelectorAll is a new thing for modern browser, i just wondering how in earlier phase developers are selecting element without querySelector, this one like tend to use everywhere..is it a good practice?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

In that case they return the same thing, the difference is the argument.

Another way to "select all links in the nav element" (without using querySelectorAll) would be like this:

let navigationLinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

that's a nice way Steven Parker, Thanks.