JavaScript Element children Property

What You’ll Learn

Element.children is a read-only instance property that returns a live HTMLCollection of child elements. Learn how to loop tags, how it differs from childNodes, and how it pairs with childElementCount—with five examples and try-it labs.

Introduction

When you need the list of nested tags inside a parent—not the count alone— children is the collection to use. It skips text and comment nodes and keeps only elements.

That makes it ideal for looping menu items, list rows, or card sections without tripping over whitespace from pretty-printed HTML.

const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}

Understanding the Property

MDN: the read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.

• Read-only — mutate the DOM to change membership.
• HTMLCollection — live, ordered list of element children.
• Elements only — excludes text and comment nodes.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

children

Value

An HTMLCollection: a live, ordered collection of child DOM elements. Access items with item(index) or array-style children[0]. If there are no element children, length is 0.

📋 MDN Loop Example Shape

MDN loops each child element and logs its tagName:

<div id="foo">
  <p>One</p>
  <span>Two</span>
  <strong>Three</strong>
</div>

const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}
// P
// SPAN
// STRONG

Related learning: childElementCount, firstElementChild, and lastElementChild.

Examples Gallery

Examples follow MDN Element: children. Labs use a simple parent with nested tags so you can inspect the live collection safely.

const myElement = document.getElementById("foo");
console.log(myElement.children.length);
console.log(myElement.children.constructor.name);

3
HTMLCollection

const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}

P
SPAN
STRONG

const box = document.getElementById("box");
console.log({
  childrenLength: box.children.length,
  childElementCount: box.childElementCount,
  childNodesLength: box.childNodes.length
});

{
  "childrenLength": 2,
  "childElementCount": 2,
  "childNodesLength": 5
}

const list = document.createElement("ul");
const kids = list.children;
console.log(kids.length); // 0

const item = document.createElement("li");
item.textContent = "One";
list.appendChild(item);
console.log(kids.length); // 1
console.log(kids[0].tagName); // LI

0
1
LI

console.log({
  supported: "children" in Element.prototype,
  type: "HTMLCollection (not Array)",
  tip: "Use for...of or Array.from(el.children)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "type": "HTMLCollection (not Array)",
  "tip": "Use for...of or Array.from(el.children)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Looping menu links, list items, or card sections.
• Reading the first or last element child by index.
• Building element-only helpers without filtering text nodes.
• Pairing with childElementCount for empty checks plus listing.
• Teaching the difference between elements and all child nodes.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• HTMLCollection is not an Array—convert when needed.
• children.length equals childElementCount.
• Related: childElementCount, classList, EventTarget, JavaScript hub.

💡 Best Practices