JavaScript element.children
last modified April 2, 2025
In this article, we explore the element.children property in
JavaScript. This property provides access to an element's child elements,
excluding text nodes and comments. It's essential for DOM traversal.
Basic Definition
The element.children property returns a live HTMLCollection of
child elements of the given element. It only includes element nodes, not text
or comment nodes.
Unlike childNodes, children is more focused as it
only returns element nodes. This makes it ideal for most DOM manipulation
tasks involving element traversal.
Accessing Child Elements
This example demonstrates how to access child elements of a parent element.
<!DOCTYPE html>
<html>
<head>
<title>Accessing Children</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Nested div</div>
</div>
<script>
const parent = document.getElementById('parent');
const children = parent.children;
console.log(children.length); // 3
console.log(children[0].textContent); // "First paragraph"
</script>
</body>
</html>
In this example, we access the children of a div element with ID "parent".
The children property returns an HTMLCollection of the three
child elements.
We can then access individual children by index and work with their properties. The collection is live, meaning it automatically updates when the DOM changes.
Iterating Through Children
This example shows how to loop through all child elements of a parent.
<!DOCTYPE html>
<html>
<head>
<title>Iterating Children</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
for (let i = 0; i < list.children.length; i++) {
list.children[i].style.color = 'blue';
}
</script>
</body>
</html>
Here we have an unordered list with three items. The JavaScript code uses
children to access all list items and changes their text color.
This demonstrates how to use a standard for loop to iterate through children. We can perform operations on each child element during the iteration.
Checking for Children
This example demonstrates how to check if an element has any children.
<!DOCTYPE html>
<html>
<head>
<title>Checking Children</title>
</head>
<body>
<div id="container">
<span>Child element</span>
</div>
<div id="empty"></div>
<script>
const container = document.getElementById('container');
const emptyDiv = document.getElementById('empty');
console.log(container.children.length > 0); // true
console.log(emptyDiv.children.length > 0); // false
</script>
</body>
</html>
In this example, we check two div elements to see if they contain any child
elements. The children.length property tells us how many child
elements exist.
This technique is useful for conditional logic based on an element's contents.
Remember that children only counts element nodes, not text nodes.
Converting Children to Array
This example shows how to convert an HTMLCollection of children to an array.
<!DOCTYPE html>
<html>
<head>
<title>Children to Array</title>
</head>
<body>
<div id="gallery">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
const gallery = document.getElementById('gallery');
const childrenArray = Array.from(gallery.children);
childrenArray.forEach(img => {
console.log(img.src);
});
</script>
</body>
</html>
Here we convert the children of a gallery div into a proper array using
Array.from(). This allows us to use array methods like
forEach.
Converting to an array is helpful when you need array methods that aren't available on HTMLCollection. It also creates a static snapshot of the elements.
Filtering Children
This example demonstrates how to filter child elements based on criteria.
<!DOCTYPE html>
<html>
<head>
<title>Filtering Children</title>
</head>
<body>
<div id="content">
<p class="important">Important note</p>
<p>Regular text</p>
<p class="important">Another important note</p>
</div>
<script>
const content = document.getElementById('content');
const importantNotes = Array.from(content.children)
.filter(child => child.classList.contains('important'));
importantNotes.forEach(note => {
note.style.fontWeight = 'bold';
});
</script>
</body>
</html>
In this example, we filter child elements to only select those with the "important" class. We then apply styling to just these filtered elements.
This demonstrates the power of combining children with array
methods for selective DOM manipulation. The filter operation creates a new
array containing only matching elements.
Source
MDN element.children Documentation
In this article, we have explored the element.children property
in JavaScript. This property is essential for DOM traversal and manipulation,
providing access to an element's child elements.
Author
List all JS DOM tutorials.