Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Patrick Noonan
Courses Plus Student 6,249 Pointswhen I use the console when utilizing the query selector, I get something like this: NodeList(3) [li.error-not-purple]..
NodeList(3) [li.error-not-purple, li.error-not-purple, li.error-not-purple], How do I get it so that it looks the same as the instructors???
4 Answers

Steven Parker
221,309 PointsThe document.querySelectorAll function has always returned a NodeList
, but the devtool output has been enhanced in the more recent browser versions to provide more information than just the HTML. In fact, if you look on the left side of the output, you should see a small triangle. Clicking that will expand the display to reveal even more info, which will include more triangles. Those will of course reveal even more. You can go down to whatever level of detail you need and/or traverse into child nodes.
The information previously reported by older versions can be seen in the "outerHTML
" attributes of each list item.

Mia Filisch
15,381 PointsSimilar issue: using document.querySelectorAll('li')
in the Chrome dev tools console for me returns:
NodeList(7) [li, li.error-not-purple, li, li, li.error-not-purple, li.error-not-purple, li]
...whereas in the video when Guil uses the same query he gets the intended HTML collection of:
[<li>grapes</li>, <li class="error-not-purple">oranges</li>, <li>amethyst</li>, <li>lavender</li>, <li class="error-not-purple">fire trucks</li>, <li class="error-not-purple">snow</li>, <li>plums</li>]
(FWIW, when using just document.querySelector('li')
, my result matches up with Guil's, i.e. a single HTML element is returned.)
Edit: It seems like NodeList
is presently the expected return type of querySelectorAll
, so maybe this video is just outdated. Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Doris Keller
Front End Web Development Techdegree Graduate 47,441 PointsThank you Mia Filisch, just run into the same issue - so I know that I didn't something wrong!

Rod R
3,050 Pointssame outcome for me. using chrome. output nodelist using selectorAll query only shows an array (nodelist) with three items: li.error-not-purple, li.error-not-purple, li.error-not-purple. the sublist only show items 0, 1, 2... and all are li.error-not-purple. Never are the actual values listed- oranges, fire trucks and snow. I know it would be difficult/impossible to update all the videos as JS updates are released. I've come to accept the fact that the concepts in the videos are whats important, and (disclaimer)... 'actual results may vary'.

aashish pasricha
4,304 PointsThe chrome is just updated i guess. It actually combines the css property with all the query Selector in there and make the pointer of the mouse to actually show the element specifically on the screen. The small square box at the end of each query makes it even.