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) Getting a Handle on the DOM Using CSS Queries to Select Page Elements

Patrick Noonan
Patrick Noonan
Courses Plus Student 6,249 Points

when 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
Steven Parker
229,005 Points

The 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
Mia Filisch
16,117 Points

Similar 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

Rod R
Rod R
3,050 Points

same 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'.

The 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.