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
ja5on
10,338 Pointsdocument.querySelector("li") it prints only <li style="color: purple;">Grapes</li>
document.querySelector("li") it prints only <li style="color: purple;">Grapes</li> It's the only line that shows is this correct?
2 Answers
Jennifer Nordell
Treehouse TeacherHi there, jasonj7! You've got it. That's correct. The querySelector() returns the first match and only the first match so it will only ever be one item. However, a querySelectorAll() returns all matches in an array-like format
Hope this helps!
Heather Eulian
405 PointsI think his question, mine as well is why we are getting a NodeList vs. all the info that is coming up when the teacher does the document.querySelectorAll("li"). I understand it is a NodeList and am assuming its just a slight difference with the code or console set up?
ja5on
10,338 PointsAs always thank you Jennifer Nordell!
ja5on
10,338 Pointsja5on
10,338 PointsHmmm think i am answering my own question here:- document.querySelector("li") it prints only
<li style="color: purple;">Grapes</li>
It's the only line that shows, is this correct? - no others, in the console.
Printing document.querySelectorAll("li") produces
NodeList(7) [li, li.error-not-purple, li, li, li.error-not-purple, li.error-not-purple, li]
0: li
1: li.error-not-purple
2: li
3: li
4: li.error-not-purple
5: li.error-not-purple
6: li
length: 7
Later on I discovered this:-
Hmmm maybe I've answered my own question, I will leave this on here for anyone else. if I do this:-
document.querySelector("ul"); then the console prints:-
<ul>
<li style="color: purple;">Grapes</li>
<li class="error-not-purple" style="color: red;">Oranges</li>
<li style="color: purple;">Amethyst</li>
<li style="color: purple;">Lavender</li>
<li class="error-not-purple" style="color: red;">Fire trucks</li>
<li class="error-not-purple" style="color: red;">Snow</li>
<li style="color: purple;">Plums</li>
</ul>
There's also a little arrow to expand or shrink the items.
I know its not "exact to the teachers video" but the results are similar, I think since I've been programming I'm learning more and more to be creative and creating my own little work around, this is just my results, hopefully someone will find a better way, anyway I hope this helps somebody.
P.S Whatever changes you make to your files remember to refresh your browsers you have the console open in! I have been scratching my head over why things don't work and I forgot to refresh.