JavaScript JavaScript and the DOM Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

Michael Williams
PRO
Michael Williams
Pro Student 8,058 Points

How 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
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

const 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
Michael Williams
Pro Student 8,058 Points

But 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
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

With 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
Michael Williams
Pro Student 8,058 Points

I 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!