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) Making Changes to the DOM Modifying Elements

Posted by Janelle Mackenzie
Janelle Mackenzie
7,510 Points

confused with querySelectorAll method...

I can't seem to understand why something like the first line of code is valid, but the second isn't.

<p>const p = document.querySelector('p.description'); </p>
<p>const p = document.querySelector('p#par1');</p>

Also I don't know why these lines of code would not be valid/the same as each other:

          <p>const p = document.getElementsByTagName('ul li a');</p>
          <p>const p = document.querySelectorAll('ul li a');</p>

1 Answer

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

First, the HTML tag marks (like "<p>") aren't for JavaScript and should be omitted.

Second, none of these relate to the linked challenge page, so what would be correct for the first two is based on some HTML that's not shown here.

// this would select a paragraph with class "description"
const p = document.querySelector('p.description');

// this would select a paragraph with an ID of "par1"
const p = document.querySelector('p#par1');  // you can simplify the selector to just '#par1'

// this function takes only a simple tag name, not a complex selector
const p = document.getElementsByTagName('ul li a');

// this is the correct function when using a complex selector
const p = document.querySelectorAll('ul li a');