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) Traversing the DOM Getting All Children of a Node with children

Benefits of the children property as opposed to using querySelectorAll?

I tried out using querySelectorAll and specifying the lists with the descendant selector syntax querySelectorAll('ul li'). What would the children property be better for as opposed to what I just mentioned other than it being shorter to write?

2 Answers

Hi Kirt,

The children property would select all of the children (first level descendants), not just the ones that are li elements. Now in this case all of the children are probably li elements (as the parent element is a ul) so it wouldn’t make much of a difference, but sometimes that is not the case.

The other difference is the children property returns an HTMLCollection (which is a live list) and querySelectorAll returns a Nodelist (which is typically static). Live simply means that changes in the DOM are reflected in the list.

Good question.

Appreciate the answer! I can now see how the children property can be used, for example, if we had other children elements inside that unordered list and we wanted to select all of them, perhaps a link, span, or button. The children property will select every children inside the parent container as opposed to my suggestion that only picks the li elements. Correct?

I'm also glad you mentioned the difference on HTMLCollection and Nodelists, though I'm still not certain of the difference. I even asked this same question about them in another post but wasn't able to get much help. So from what I can understand from what you said, if we have a property that returns an HTMLCollection, if we grabbed the children elements with the .children property and we add a list to the HTML through javascript, the children property still selects the newly added list? And then if we only used querySelectorAll, we would not be able to grab that new list?

Edit: I went through an article provided below explaining the difference. I believe what I tried to explain from my previous understanding is kind of spot on. I think the better question now is, which is best to use in certain situations? How would a HTML collection be better than a NodeList and vice versa? It's hard to see the difference in this treehouse example as they both seem to work the same way.

https://dev.to/jharteaga/difference-between-htmlcollection-and-nodelist-25bp