Last Updated: 26th September 2025
Imagine you're working on a web page that contains a <div> element acting as a container for multiple nested elements, like <span>, <p>, <ul>, or even other <div>s. Whether you're building a dynamic UI or just need to manipulate or inspect these child elements, JavaScript gives you a straightforward way to access them using the HTML DOM children property.What Is the children Property?
The children property is part of the HTML DOM and returns a live HTMLCollection of all element nodes (excluding text and comment nodes) that are direct children of a specified parent element.
How to Use it?
See the HTML below. I have two child <span> elements with values t1 and t2 inside a parent <div>.
<div class='container'>
<span>t1</span>
<span>t2</span>
</div>The Script
Here's a simple script to get the child elements using the childred property.
<script>
const parentDiv = document.getElementById("container");
const childElements = parentDiv.children;
console.log(childElements); // Outputs: [<span>, <span>]
console.log(childElements.length); // Outputs: 2
</script>• parentDiv.children returns an "HTMLCollection" of all direct child elements.
🚀 Note: Use children when you want only the actual HTML elements, not stray whitespace or text nodes.
👉 Now, to retrieve the content from the child <span> elements, I first need to access all the child elements within the parent <div>.
So, let's get the content from each child element.
The markup contains a <div> element with multiple child <span> elements, each displaying a weekday name. The objective is to identify and visually highlight the <span> that matches the current day.
For example, if its Tuesday today, then the script should "search" the day inside the SPAN elements and highlight it.
<body>
<!-- The parent element and its children. -->
<div id="days">
<!--the children-->
<span>MON</span>
<span>TUE</span>
<span>WED</span>
<span>THU</span>
<span>FRI</span>
<span>SAT</span>
<span>SUN</span>
</div>
<input type="button" value="Click it" onclick="highlightCurrentDay()" />
</body>
<script>
const highlightCurrentDay = () => {
const today = new Date();
const weekdayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
const currentDay = weekdayNames[today.getDay()];
const dayElements = document.getElementById('days').children; // Using childred property.
// Convert HTMLCollection to an array for easier iteration.
Array.from(dayElements).forEach((element) => {
const dayText = element.textContent.trim().toUpperCase();
// Highlight the current day in red, others in black.
element.style.color = dayText === currentDay ? '#FF0000' : '#000000';
});
};
</script>Simplify above script using .map() function
You can further simplify the above script using the .map() function, an better alternative to for loop.
<body>
<!-- The parent and its children. -->
<div id="days">
<!--the children-->
<span>MON</span>
<span>TUE</span>
<span>WED</span>
<span>THU</span>
<span>FRI</span>
<span>SAT</span>
<span>SUN</span>
</div>
<input type="button" value="Click it" onclick="findElements()" />
</body>
<script>
const findElements = () => {
const dt = new Date();
const weekday = new Array('SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT');
// the .children property returns an HTMLCollection object
// and using spread (...) operator it converts the collection object into an array.
const ele = [...document.getElementById('days').children];
// We have an array, so now we can use the map() function.
ele.map(ele =>
(ele.innerHTML === weekday[dt.getDay()]) ?
ele.setAttribute('style', 'color:#FF0000;') :
ele.setAttribute('style', 'color:#000;')
)
}
</script>Get Elements inside Child Elements
Now, let’s consider a different scenario:
What if each child element contains additional nested elements, such as <div>s or other tags? In other words, instead of having a flat structure, your parent <div> contains children that themselves have their own children. For example,
<div id="days"> <!-- The Parent --> <ul> <!-- The Child --> <li>MON</li> <!-- More Child elements. --> <li>TUE</li> </ul> </div>
The content is nested within two levels of elements, a parent <div>, which contains a child <ul>, and within that, multiple <li> elements. Here's how I plan to traverse this structure and search for a matching value.
<html>
<head>
<style>
input { cursor: pointer }
ul { list-style: none; margin: 0; padding: 0; }
li { display: inline-block; }
</style>
</head>
<body>
<div id="days"> <!-- The Parent -->
<ul> <!-- The Child -->
<li>MON</li> <!-- More Child Elements -->
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
</div>
<p><input type="button" value="Click here" onclick="highlightCurrentDay()" /></p>
</body>
<script>
function highlightCurrentDay() {
const dt = new Date();
const weekday = new Array('SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT');
const days = Array.from(document.getElementById('days').children);
days.forEach((child) => {
if (child) {
const listItems = Array.from(child.children);
listItems.forEach((li) => {
const dayText = li.textContent.trim().toUpperCase();
li.style.color = dayText === weekday[dt.getDay()]
? '#FF00FF' : '#000000';
});
}
});
}
</script>
</html>In the example above, I've utilized the children property twice, first to access the direct child elements within the <div>, and then again to retrieve the <li> elements nested inside the <ul>.
Conclusion
Accessing and manipulating elements inside a <div> using JavaScript is a foundational skill for working with the DOM. This guide demonstrated how the children property lets you efficiently retrieve direct child elements, whether you're working with simple <span> tags or more structured elements like <ul> and <li>.
We also showed how to highlight specific content, such as the current day of the week, by comparing values and applying styles dynamically. To make the code cleaner and more expressive, we used the spread operator to convert the HTMLCollection into an array and applied the .map() function for iteration, an approach that aligns with modern JavaScript best practices.