The firstChild property returns the first child
node of a node.
The firstChild property returns a node object.
The firstChild property is read-only.
The firstChild property is the same
as childNodes[0].
The lastChild property returns the last child node
of a node.
The lastChild property returns returns a node
object.
The lastChild property is read-only.
<!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>//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);