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.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Using CSS Queries to Select Page Elements

Patrick Noonan
PLUS
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
221,309 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
15,381 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.