Get All the Elements inside a DIV Element in JavaScript

Imagine you have a web page with a DIV element that has many other elements nested inside it. How would you get all the elements inside the DIV (or any other element) using JavaScript? I recently came across this situation, and the solution I found was rather simple. I used HTML DOM “children” Property.

The Property children returns a collection of child elements of a specified (parent) element. See this example. I have got two children div elements with values t1 and t2 inside a parent div.

<div>
    <div>t1</div>
    <div>t2</div>
</div>

See this demo

I wish to get all the data from the children DIV elements using JavaScript.

Let’s add more <div> with values, inside the parent div. I’ll show you how you can get all the children using the children Property in JavaScript.

The Code

What I got here is a collection of div elements inside a div. Each child element has a value as day of a week. I wish to show or highlight the day matching the current day. For example, if its Tuesday today, then the script should search the day inside the div elements and highlight it.

<!DOCTYPE html>
<html>
<head>
    <title>Get All Elements inside a DIV using JavaScript</title>
</head>
<body>
    <div id="days" 
        style="margin: 10px 0;
        padding: 5px 3px;
        text-align: center;
        letter-spacing: 1px;
        border: solid 1px #CCC;">

        <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>
    function findElements() {
        var dt = new Date();
        var weekday = new Array('SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT');

        var days = document.getElementById('days').children;
        for (i = 0; i <= days.length - 1; i++) {

            // GET THE CHILDREN.

            if (days[i].innerHTML === weekday[dt.getDay()])
                days[i].setAttribute('style', 'color:#FF0000;');
            else
                days[i].setAttribute('style', 'color:#000;');
        }
    }
</script>
</html>

Try it

The children Property returns an HTMLCollection object. The elements are the immediate child elements (or children) of the parent element. If you check the length of the variable days, it would return 7.

var days = document.getElementById('days').children;
console.log (days.length);

Get Elements inside Child Elements

Now here's another scenario. What if I have more clild elements, that is, div (or other elements) inside each child element. For example, I may have a markup like this…

<div id="days">
    <ul>
        <li>MON</li>
    </ul>
</div>

Here, I have content inside 2 elements, that is, a Parent (the <div>), a Child (the <ul>) and another Child (the <li>). Well, this is how I am gonna search the content and find a match.

The Markup and the Script

This time I’ll add an Unordered list (<ul>) with similar values.

<html>
<body>
    <div id="days">
        <ul style="list-style:none;margin:0;padding:0;">
            <li style="display:inline-block;">MON</li>
            <li style="display:inline-block;">TUE</li>
            <li style="display:inline-block;">WED</li>
            <li style="display:inline-block;">THU</li>
            <li style="display:inline-block;">FRI</li>
            <li style="display:inline-block;">SAT</li>
            <li style="display:inline-block;">SUN</li>
        </ul>
    </div>

    <p><input type="button" value="Click here" onclick="findElements()" /></p>
</body>

<script>
    function findElements() {
        var dt = new Date();

        var weekday = new Array('SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT');

        var days = document.getElementById('days').children;
        for (i = 0; i <= days.length - 1; i++) {

            // GET CHILDREN'S CHILDREN.

            if (days[i].tagName == 'UL') {
                var li = document.getElementsByTagName('UL').item(0).children;
                for (j = 0; j <= li.length - 1; j++) {
                    if (li[j].innerHTML === weekday[dt.getDay()])
                        li[j].setAttribute('style', 'color:#F0F;display:inline-table;');
                    else
                        li[j].setAttribute('style', 'color:#000;display:inline-table;');
                }
            }
        }
    }
</script>
</html>

Try it

I have twice used the children Property in the above example. First, I’ll get the child elements inside the <div> and second, I’ll get the children inside <ul>, that is, all the <li> elements with its values. However, this time, I used the JavaScript method getElementByTagName() to search for all children inside <ul>, instead of getElementById() method.

← PreviousNext →