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

Posted by Kirt Perez
Kirt Perez
7,374 Points

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

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 Points

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.

Kirt Perez
Kirt Perez
7,374 Points
Kirt Perez
Kirt Perez
7,374 Points

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