Skip to main content Accessibility Feedback

Traversing the DOM

Node.children

Returns a live HTMLCollection, which means if items are added to it later, the collection updates as well.

<div class="wizards">
	<ul>
		<li>Gandalf</li>
		<li>Radagast</li>
		<li>Hermione</li>
		<li>Neville</li>
	</ul>
</div>
let wizards = document.querySelector('.wizards');
let wizardsList = document.querySelector('.wizards ul');

// returns an HTMLCollection with the ul element
let wizardDescendants = wizards.children;

// returns an HTMLCollection with the list items
let wizardListDescendants = wizardsList.children;

// Add a new item
let li = document.createElement('li');
li.textContent = 'Merlin';
wizardsList.append(li);

// wizardListDescendants now automatically contains the new li