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 Daniel Eckert
Daniel Eckert
Courses Plus Student 1,756 Points

Can someone please help?

I can not figure out how to get this code to pull the grandchildren of the nav tag. I have been googling and trying to figure it out for over 24 hours. Can anyone help?

js/app.js 
let navigationLinks = document.getElementsByTagName('nav ul');
let galleryLinks;
let footerImages;

console.log(navigationLinks);
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

You're pretty close, but the instructions say to "select all links in the nav element", and a "ul" is an unordered list.

Links are implemented using anchor ("a") elements.

You also need to use a function that will handle the selector.

Daniel Eckert
Daniel Eckert
Courses Plus Student 1,756 Points

What?

I have spent housrs reading and researching. I am pulling my own hair out. I get not just giving the answer. Can you link somewhere I can read something that will help me understand?

What do you mean by "a"? What do you mean by 'anchor'?

I have rewatched the videos, read w3, read MDN. I am too OCD to just skip ahead. please....

Daniel Eckert
Daniel Eckert
Courses Plus Student 1,756 Points

I have tried adding "class="selected"" inside each <a href> tag. Then calling by getElementByClassName that wouldn't accept my answer. I tried assigning IDs to each one; that wouldn't accept my answer. I tried using querySelectorAll but I have no idea how it even works and couldn't get it to pass with that. I tried using getElementByTagName('nav') [0].children.getElementByTagName('a'); that didn't work. I am at a loss and beating my head on the keyboard. I know this stuff is basic and fundamental for JS so I can't just give up. I just need a little direction.

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

The instructions say to target links. Links are created with "<a>" elements. The tag name is "a" but the name of that element is "anchor". When you give one of these an "href" attribute, then it becomes a "link".

Your selector "nav ul" selects unordered lists that are in a "nav" element, but that's not quite what the instructions asked for. Your're really close but you need to specify a different final target in the selector.

Also, you need to use a different function. The "getElementsByTagName" function only works with a single tag name. But there's another function that will take a CSS-style descendant selector like the one you are using.

For this challenge, the HTML is provided only for inspection. All work should be done in JavaScript, so don't modify the HTML.

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

Did you get it yet? If not, you might want to try the "querySelectorAll" function. :wink:

Lucian Rotari
Lucian Rotari
12,007 Points
Lucian Rotari
Lucian Rotari
12,007 Points

Just few seconds to find this link it seems that some one got the same problem as you before. When you do some researches on internet you have to ask the right question.

But you have to understand what you did wrong, Steven Parker has explained very well your mistake above, just read it again, find some more information.

Daniel Eckert
Daniel Eckert
Courses Plus Student 1,756 Points

I got it thanks to your link but I do not understand at all what the difference between 'getElements' and 'querySelector' is.

So far through this course I have understood each line of code I was required to write. While some of them took more resarch than others I eventually understood what was happening. These escape my grasp.

Lucian Rotari
Lucian Rotari
12,007 Points
Lucian Rotari
Lucian Rotari
12,007 Points

with document.getElementsByTagName function you can get just one element at time it does not work as CSS.

Using getElementsByTagName function you can get just "nav" or just "a" only one elemnt at time, but via querySelector function you can get 'a' inside of 'nav' element (is more like CSS selector or jQuery).