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

Aleksandra Milosavljevic
Aleksandra Milosavljevic
7,100 Points
Posted by Aleksandra Milosavljevic
Aleksandra Milosavljevic
7,100 Points

Feel stuck. I tried everything :/

?

js/app.js 
let navigationLinks = document.getElementsByTagName('li')[0][1][2];
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>
Robert Schaap
Robert Schaap
19,836 Points
Robert Schaap
Robert Schaap
19,836 Points

document.getElementsByTagName('li')[0][1][2] is assuming you're retrieving an array of "li" items. [0] will return the index.html link, but adding [1][2] after it is not summing or adding them. You're instead saying:

in the "li"-array at position 0, there's another array inside, get me position 1 from that, there's yet another array inside that, get me position 2 from that.

You can use splice or pop methods on the array, but it's safer in this case to just be a bit more specific. Either first use getElementsByTagName to get the "nav" element and then try to target the list items within. Or you can try to use document.querySelectorAll, which is much easier.

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I see you have some points in CSS, so I'm guessing you remember CSS selectors, right? If I wanted (in CSS) to select all links inside the nav element using CSS I could do something like:

nav a {
  // write rule here
}

This is CSS that selects all link items inside the nav element. Note that links are denoted by anchor tags or <a> elements. A <li> is a list item.

So, using this bit of information about CSS Selectors (as pointed to in the title of the previous video). I can pass in a CSS selector to a querySelector.

In this case: 

document.querySelectorAll('nav a');

This will return a collection containing all anchor elements residing inside the nav element.

Hope this helps! :sparkles:

Aleksandra Milosavljevic
Aleksandra Milosavljevic
7,100 Points
Aleksandra Milosavljevic
Aleksandra Milosavljevic
7,100 Points

Thanks. I guess I haven't realized you can assign more than one tag at the same time.