JS Children Methods

The children property returns a collection of an element's child elements.

The children property returns an HTMLCollection object.

childNodes:

The childNodes property returns a collection (list) of an elements's child nodes.

The childNodes property returns a NodeList object.

The childNodes property is read-only.

childNodes[0] is the same as firstChild.

html file

<!DOCTYPE html>
<html id="main">
<head>
    <title>Basic Layout</title>
</head>
<style>
    #outer {
        width: 550px;
        height: 300px;
        padding: 10px 10px;
        margin: 0 auto;
        background: lightsalmon;
    }

    #inner {
        width: 500px;
        height: 200px;
        padding: 10px 10px;
        margin: 0 auto;
        background: mediumorchid;
    }

    #inner div {
        display: inline-block;
        background: #fff;
        width: 95px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
    <div id="outer">
        <h2>Outer</h2>
        <div id="inner">
            <h2 id="child-head">Inner</h2>
            <div>A</div>
            <div>B</div>
            <div id="child-C">C</div>
            <div>D</div>
            <div id="child-E">E</div>
        </div>
    </div>
    <script src="js/dom-nav.js"></script>
</body>
</html>

dom-nav.js

//var a = document.getElementById("outer").children;

//var a = document.getElementById("inner").children;

//var a = document.getElementById("inner").children[1];

/* document.getElementById("inner").children[1].style.background = "red";
var a = document.getElementById("inner").children[1]; */

/* document.getElementById("inner").children[0].style.background = "red";
var a = document.getElementById("inner").children[0].innerHTML; */

//var a = document.getElementById("inner").childNodes;

//var a = document.getElementById("inner").childNodes[0].innerHTML;

document.getElementById("inner").childNodes[3].style.background = "red";
var a = document.getElementById("inner").childNodes[3]; 

console.log(a);