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
Michael Williams
Courses Plus Student 8,059 PointsHow do I select a specific tag if there are multiple tags that have no IDs, attributes or CSS elements?
Given the code below, how would I select the second p tag? I know (and understand why) const p = document.querySelector("p.description"); selects the one by its class, but say I only wanted that second p tag, how would I do that? This doesn't seem to work:
const singleP = document.querySelector("body")[2];
Did I miss how to do this in a video somewhere?
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<p>Test, test, test.</p>
<p class="description">Things that are purple:</p>
<input type="text" class="description">
<button class="description">Change list description</button>
<ul>
<li>grapes</li>
<li>amethyst</li>
<li>lavender</li>
<li>plums</li>
</ul>
<script src="app.js"></script>
</body>
</html>
1 Answer
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Pointsconst singleP = document.querySelector("body")[2]; selects the third <body> element because you wrote the index to be 2. Remember that indexes start from 0, [0, 1, 2]. If you want to select the second paragraph you need to use something like document.querySelectorAll('p'). This will return a "array-like" list of all the paragraphs on the page, and to specify the second one you do so just like an array by writing [1] after document.querySelectorAll('p').
Michael Williams
Courses Plus Student 8,059 PointsMichael Williams
Courses Plus Student 8,059 PointsBut wouldn't
<p>Test, test, test.</>be the third element within the body—where<h1> id="myHeading...is the first element and<p>Making a...is the second?I have another scenario (which is probably getting head of where I am in the course): Say there were 100
<p>s in the code with no IDs or anything, and I wanted the 37th one. If I did.querySelectorAll('p')[36], I'd first have to count all the<p>s to get its location. Is there an easier way todo this?Thank you for your help!
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 PointsRuben Ponce
Full Stack JavaScript Techdegree Student 12,035 PointsWith querySelectorAll(“body”), you are targeting all the body elements in the document. And there’s only one body element. So it will only return the body tag. You’ll learn how to target the children of another element in the future. Also in your hypothetical scenario, there’s too many variables. For example is the paragraph generated through JavaScript? Is the paragraph hard-coded within the HTML? At what’s point in the code do you need to target it? Often times it’s just easier to target elements with a class that you assigned to them with JavaScript. You’ll develop an intuition for how to target your elements.
Michael Williams
Courses Plus Student 8,059 PointsMichael Williams
Courses Plus Student 8,059 PointsI understand 100% now. It can only target similar elements. And since
<p>isn't a<body>, it wouldn't get picked up. My previous understanding was that.querySelectorAll("body")would treat everything in the body like an array no matter what kind of tag it has and that brackets could let you access them.Thanks!