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 Jose Guzman
Jose Guzman
8,789 Points

How do i select the 3 links inside the nav bar without making changes to the hTML?

Here i'm required to select the 3 links inside the nav bar but i'm not sure how to do that. Im supposed to use either document.getElementsByTagName or document.querySelector...

please help

js/app.js 
let navigationLinks = document.querySelectorAll(nav[li]);
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

delanobartolomei
seal-mask
.a{fill-rule:evenodd;}techdegree
delanobartolomei
Full Stack JavaScript Techdegree Student 14,052 Points
delanobartolomei
.a{fill-rule:evenodd;}techdegree
delanobartolomei
Full Stack JavaScript Techdegree Student 14,052 Points

If you have no control over the HTML, then document.querySelectorAll('nav li a') is your best bet.

Now, querySelectorAll returns a NodeList and NOT an Array. You first need to convert your nodeList to an array like this: let navigationLinks = [].slice.call(document.querySelectorAll('nav li a'));

This way you can access your links with navigationLinks[0], navigationLinks[1], navigationLinks[2].

Elmir Halebic
Elmir Halebic
14,098 Points
Elmir Halebic
Elmir Halebic
14,098 Points

I'd do this: let navigationLinks = document.querySelectorAll('nav li a');

remember, querySelectorAll returns an array so if you want to target the first element, then you'd do this: navigationLinks[0]; if you want to target them all, like change their color, you can do it with a for loop to iterate through the entire array. Hope this helps :)

Jose Guzman
Jose Guzman
8,789 Points

Thank you. This was very helpful.