Welcome to the Treehouse Community
Looking to learn something new?
Patrick NoonanCourses 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???
Steven Parker221,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 Filisch15,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 R3,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.