Previous Next

JS firstChild & lastChild Method


html file

<!DOCTYPE html>
<html id="main">
<head>
    <title>DOM Navigation</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>Inner</h2>
            <div>A</div>
            <div>B</div>
            <div id="child-c">C</div>
            <div>D</div>
            <div>E</div>
        </div>
    </div>
    <script src="js/dom-nav.js"></script>
</body>
</html>


dom-nav.js

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

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

/* document.getElementById("inner").firstElementChild.style.background = "red";
    var a = document.getElementById("inner").firstElementChild.innerHTML; */


/* document.getElementById("outer").lastElementChild.style.background = "red";
    var a = document.getElementById("outer").lastElementChild; */


/* document.getElementById("inner").lastElementChild.style.background = "red";
    var a = document.getElementById("inner").lastElementChild;  */


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

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

//var a = document.getElementById("child-c").firstChild; 

var a = document.getElementById("child-c").lastChild; 

console.log(a);

Previous Next