JavaScript DOM traversal methods first child and last child

 <!DOCTYPE html>

<html id="main">

    <head>

        <title>DOM Navigation</title>

        <style>

            div#outer{

    height:200px;

    width:400px;

    background-color:orange;

    position: absolute;

    border-radius:10px;

}

div#inner{

    width:500px

    height:200px;

    position: absolute;

    background:skyblue;

    border-radius:10px;

    margin-top:-10px;

    margin-left:100px;

}

span{

    width:100px;

    height:50px;

    font-size:35px;

    background: white;

    word-spacing:50px;

    display:inline;

    border-radius:5px;

    margin:10px;

}

        </style>

    </head>

    <body>

        <div id="outer">

        <h2>Outer</h2>

            <div id="inner">

            <h2>Inner</h2>

                <span>A</span>

                <span>B</span>

                <span id="child-c">C</span>

                <span>D</span>

                <span>E</span>

            </div>

        </div>

        <script>

            document.getElementById("outer").firstElementChild. style.textDecoration="underline";

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

console.log(a);

document.getElementById("inner").lastElementChild. style.color="red";

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

console.log(a);

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

console.log(a);

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

console.log(a);

        </script>

    </body>

</html>



OUTPUT




Comments