HTML Element .children / firstElementChild / lastElementChild

// Get a list of child elements.
var elements = element.children;

// Get the first child element.
var first = element.firstElementChild;

// Get the last child element.
var last = element.lastElementChild;

sample_children.html

<ul id="members">
	<li>Okabe Rintaro</li>
	<li>Makise Kurisu</li>
	<li>Shiina Mayuri</li>
	<li>Hashida Itaru</li>
</ul>

sample_children.js

var members = document.getElementById("members");

// Pattern 1: Check the count and list of child elements with children
console.log(members.children.length); // Outputs "4"

// Pattern 2: Access a specific child element by index
console.log(members.children[0].textContent); // Outputs "Okabe Rintaro"
console.log(members.children[3].textContent); // Outputs "Hashida Itaru"

// Pattern 3: childNodes includes text nodes, so the count is higher
console.log(members.childNodes.length); // Outputs "9" (newlines between tags are also counted)

// Pattern 4: Get only HTML elements reliably with firstElementChild / lastElementChild
console.log(members.firstElementChild.textContent); // Outputs "Okabe Rintaro"
console.log(members.lastElementChild.textContent);  // Outputs "Hashida Itaru"

// Pattern 5: Loop through all child elements
for (var i = 0; i < members.children.length; i++) {
	console.log((i + 1) + ": " + members.children[i].textContent);
}
// Outputs "1: Okabe Rintaro", "2: Makise Kurisu", "3: Shiina Mayuri", "4: Hashida Itaru" in order.

View sample page

element.children returns only HTML element children as an HTMLCollection. element.childNodes returns all child nodes, including text nodes and comment nodes, so for typical DOM manipulation, using element.children — which only includes HTML elements — helps avoid unexpected results.

In HTML source code, line breaks and indentation whitespace between tags are treated as text nodes. As a result, using childNodes, firstChild, or lastChild may return whitespace text nodes. When you need to reliably retrieve HTML elements only, use children, firstElementChild, or lastElementChild.

To count child elements, use children.length. If you need to find child elements matching a specific condition, element.querySelector() or element.querySelectorAll() are more convenient.