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
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsQueryselectors vs. getElementsByTagName
Dears,
Could you help me? First I wanted to use the queryselector to select all the elements with id: 'rainbow' however, it didn't work. I understand that the good solution is with getElementsByTagName, but what's the problem with the queryselectors?
it's ok:
document.getElementsByTagName('p')
But this one isn't:
document.querySelector('#rainbow')
<!DOCTYPE html>
<html>
<head>
<title>Rainbow!</title>
</head>
<body>
<ul id="rainbow">
<li>This should be red</li>
<li>This should be orange</li>
<li>This should be yellow</li>
<li>This should be green</li>
<li>This should be blue</li>
<li>This should be indigo</li>
<li>This should be violet</li>
</ul>
<script src="js/app.js"></script>
</body>
</html>
let listItems = document.getElementsByTagName('p');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
for(var i = 0; i < colors.length; i ++) {
listItems[i].style.color = colors[i];
}
2 Answers
Jennifer Nordell
Treehouse TeacherHi there, Peter Retvari! As Adam Beer indicated, querySelectorAll() would be the way to go here if you want to use that. The querySelector returns only the first item that matches, while querySelectorAll() returns all items that match. You've tried to select the item with the id of "rainbow", and succeeded. There is only one item on the page with the id of "rainbow" and that is an unordered list. But the challenge didn't ask you to select the unordered list, rather it asked you to select all list items within that unordered list. In this case, you would need something like document.querySelectorAll("li"); Because those list items are the only ones on the page, we can just choose to select the list items that way. However, if you had more than one unordered list, you might need to be a bit more specific and do something like document.querySelectorAll("#rainbow li"); This will pick all list items within the element that has the id "rainbow".
I'm not sure if this was part of your question, but I'd like to point out that querySelctors are great for very tricky DOM traversals so we don't have to chain a bunch of getElement(s)By... together. But they do have a bit of parsing going on under the hood, which means that there will be a slight performance hit when you use one. If you have a simple traversal, you should use getElementsBy... if possible.
Hope this helps!
Adam Beer
11,314 PointsSelect list elements with querySelectorAll() method. I think it does work :)
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsKöszi ?I knew that querySelectorAll() method, however, it didn't work because I was not familiar how to select nested elements (as Jennifer referred). In this case this would be the solutions because we have to select all li elements too:
document.querySelectorAll('#rainbow li');
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsPeter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsThanks, Jennifer, a couple minutes after my question I realized that I have to display all list item. For this and other nested elements inside the HTML it's much better to use querySelector or querySelectorAll. I just didn't know how to select the nested elements. Many thanks one more time for your detailed answer.