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 shay elbaz
shay elbaz
2,885 Points

getElementByTagName look the only way here... but its not working?... PLEASE HELP?

In the following tasks you'll be required to select various elements on the index.html page. In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

js/app.js 
let navigationLinks = document.getElementsByTagName("nav");
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>
Ruben Ponce
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

it should work. the parentElement should be nav. and the child element should be a. because nav is the parent element of the links you want to target

6 Answers

shay elbaz
shay elbaz
2,885 Points

let navigationLinks = document.querySelectorAll("nav > ul > li > a"); this is the answer! it was really hard... but i did it!

Ruben Ponce
seal-mask
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points
Ruben Ponce
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

hi. You had the right idea that you want gather up all the elements nav, but when you say getElementsByTagName("nav"), it will not only select the nav, but also the ul, li, and a. In this case you want to use the querySelectorAll() method. This will allow you to select all elements of nav, and then specify where in the nav you want to select.

So try using document.querySelectorAll(parentElement, childElement);

shay elbaz
shay elbaz
2,885 Points

Hi, Thank you very much but your line is not working my friend...

shay elbaz
shay elbaz
2,885 Points

Bummer: There was an error with your code: ReferenceError: Can't find variable: parentElement It's not working my friend... wow really do not know what to do...

Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points

this is a good tip!

Gonzalo Torres del Fierro
PLUS
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points

this was the right answer.....uhmm

let navigationLinks = document.querySelectorAll('nav > ul > li > a'); let galleryLinks; let footerImages;

Gonzalo Torres del Fierro
PLUS
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points 
let navigationLinks = document.querySelectorAll('nav > ul > li > a');
let galleryLinks;
let footerImages;s code!</p>
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points

In the following tasks you'll be required to select various elements on the index.html page.

In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

Gonzalo Torres del Fierro
PLUS
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Courses Plus Student 16,751 Points

what´s the difference let navigationLinks = document.querySelectorAll('nav , ul , li, a'); let navigationLinks = document.querySelectorAll('nav > ul > li > a')

Everistus Akpabio
Everistus Akpabio
2,929 Points
Everistus Akpabio
Everistus Akpabio
2,929 Points

note the '>' symbol is not required when working with JS; the solution can also be achieved using:

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