JavaScript JavaScript and the DOM Getting a Handle on the DOM Selecting Multiple Elements

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points

Queryselectors 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')
index.html
<!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>
js/app.js
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
STAFF
Jennifer Nordell
Treehouse Staff

Hi 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! :sparkles:

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points

Thanks, 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.

Adam Beer
Adam Beer
11,269 Points

Select list elements with querySelectorAll() method. I think it does work :)

Peter Retvari
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points

Kö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');