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

Jacob Fults
Jacob Fults
10,791 Points
Posted by Jacob Fults
Jacob Fults
10,791 Points

How to access multiple <a> elements inside a <nav> element?

I can access the first link with document.querySelectorAll('nav') but how do I get access for the second and third link?

js/app.js 
let navigationLinks = document.querySelectorAll('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" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">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

shyarkhalil
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points
shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

Hey Jacob Fults! If I were you I'll give a different Id for each one the use this method: let galleryLinks = document.querrySelector(".the id you want to give") let footerImages = document.querrySelector(".the id you want to give")

Jacob Fults
Jacob Fults
10,791 Points
Jacob Fults
Jacob Fults
10,791 Points

Thank You shyarkhalil

shyarkhalil
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points
shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

You are welcome!