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
Rebecca Jensen
11,580 PointsUsing getElementsByTagName, can I target two nesting items in the DOM? E.g. both the "nav" tag AND the "li" tags within?
I'm trying to complete a JavaScript challenge, and need to target the <li> within the <nav>. I know how to target either the nav or the li, but not both.
How can I do this? Or am I thinking about this the wrong way?
let navigationLinks = document.getElementsByTagName('nav');
let navigationLinks = document.getElementsByTagName('nav');
let galleryLinks;
let footerImages;
<!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>© 2016 Nick Pettit.</p>
</footer>
</div>
<script src="js/app.js"></script>
</body>
</html>
2 Answers
Mathias Nicolajsen
3,042 PointsHey,
I had a bit problems too, but I found out.
Sorry that I can't till you how it works, but I have a link to another person who also have asked the same question
https://teamtreehouse.com/community/having-issues-selecting-the-nav-element
let navigationLinks = document.querySelectorAll("nav a");
let galleryLinks = document.querySelectorAll("[id=gallery] a");
let footerImages = document.querySelectorAll("footer img");
Mathias Nicolajsen
3,042 PointsBy the way, sometimes it will say:
"Oops! It looks like Task 1 is no longer passing."
Just reload it and try agen.
Rebecca Jensen
11,580 PointsAh, thank you- that does work. It makes sense that "nav a" would work, but I don't remember that coming up in the tutorial.
James Almeida
8,881 PointsVery helpful. Thanks!
Mathias Nicolajsen
3,042 PointsI belive we learn it in "Using CSS Queries to Select Page Elements"
(link=https://teamtreehouse.com/library/using-css-queries-to-select-page-elements)
at 3:35
Rebecca Jensen
11,580 PointsRebecca Jensen
11,580 PointsSome Googling led me to this idea to combine two, but it still doesn't work:
let navigationLinks = document.getElementsByTagName('nav').getElementsByTagName('li');