Get All the Elements inside a DIV Element in JavaScript

Let us assume, you have a web page with a DIV element (the parent element) that has many other elements nested inside it. How would you get all the elements inside the DIV using JavaScript? You can use HTML DOM children Property to get all the child elements.

See this demo

The children property returns an HTML collection of all child elements of a specified (parent) element.

See the markup below. I have got two child <span> elements with values t1 and t2 inside a parent <div>.

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

I want to get the content from the child <span> elements. To get content, I need to first get all the child elements.

The markup and the script

In the markup section, I have a collection of SPAN elements inside a DIV element. 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 SPAN elements and highlight it.

<!DOCTYPE html>
<html>
<head>
    <title>Get All Elements inside a DIV using JavaScript</title>
</head>
<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>
    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.

let days = document.getElementById('days').children;
console.log (days.length);  // Output: 7

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>
  let findElements = () => {
    let 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.
    let 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>

Try it

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,

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

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>
    let 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 used the children property "twice" 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 →