What is DOM firstElementChild

इस method के द्वारा किसी parent के First Child को return करता है |

Syntax :

attributename.firstElementChild

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Child of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Child of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Child of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

   //1. find first child element using firstElementChild
      var a  = document.querySelector(".main-parent .inner-parent ul").firstElementChild;
      console.log(a);
      //styling
      var b = document.querySelector(".main-parent .inner-parent ul").firstElementChild;
      b.style.background="lightblue";

</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

What is DOM lastElementChild

इस method के द्वारा किसी parent के Last Child को return करता है |

Syntax :

attributename.firstElementChild

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Child of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Child of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Child of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

//2. find last child element using lastElementChild
var c = document.querySelector(".main-parent .inner-parent ul").lastElementChild;
console.log(c);
c.style.background="gray";

</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

What is DOM firstChild

यह method भी firstElementChild की तरह किसी parent के firstChild को return करता है

Different between firstChild & child element

firstElementChild : यह parent के अंदर sbace या break को भी child समझता है

firstChild : यह parent के अंदर sbace या break को child नहीं समझता है

Syntax :

attributename.firstChild

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Child of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Child of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Child of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

//find child elemnt of ".inner-parent ul"
var a = document.querySelector(".main-parent .inner-parent ul")           
a.childNodes;//It returns the whole child as an object.            
a.childNodes[1];//To return a particular child, its indexing has to be used.
console.log(a)

//find & style child elemnt and ".inner-parent ul"
var b = document.querySelector(".main-parent .inner-parent ul")                   
b.childNodes[1].style.background="lightblue";
console.log(b)


</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>

What is DOM lastChild

यह method भी lastElementChild की तरह किसी parent के lastChild को return करता है

Different between firstChild & child element

lastChild : यह parent के अंदर sbace या break को भी child समझता है

lastElementChild : यह parent के अंदर sbace या break को child नहीं समझता है

Syntax :

attributename.lastChild

Example

Html Code


<div class="main-parent">
  <b>Grandparent</b>
  <div class="inner-parent">
   <span class="bdr"> Child of Grandparent, <label>Parent x<p> of A, B, C & D</p></label> </span>
    <ul>
      <li><a href="">A. <strong>First Child of Parent x</strong> <span>(Sibling)</span></a></li>
      <li><a href="">B. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">C. <strong>Child of Parent x</strong>  <span>(Sibling)</span></a></li>
      <li><a href="">D. <strong>Last Child of Parent x</strong>  <span>(Sibling)</span></a></li>
    </ul>
  </div>
</div>

Javascript Code


<script>

//find child elemnt of ".inner-parent ul"
var a = document.querySelector(".main-parent .inner-parent ul")           
a.childNodes;//It returns the whole child as an object.            
a.childNodes[1];//To return a particular child, its indexing has to be used.
console.log(a)

//find & style child elemnt and ".inner-parent ul"
var b = document.querySelector(".main-parent .inner-parent ul")                   
b.childNodes[1].style.background="lightblue";
console.log(b)


</script>

css Code


<style>
  .main-parent{
    border:solid 5px #ff931e;
    padding:15px;
    text-align:center;
    margin:100px;
  }
  .main-parent b{
    font-size: 30px;
    margin: 10px auto;
    display: table;
    border: solid 3px #afa9a9;
    padding: 4px 15px;
    position: relative;
  }
  .main-parent b:after{
    content: " ";
    width: 3px;
    height: 15px;
    background: #afa9a9;
    left: 82px;
    position: absolute;
    top: 42px;
  }
  .parent-inner{
    text-align:center;
    border:solid 5px blue;
    padding:15px;        
  }
  .inner-parent span.bdr{
    display: table;
    border:solid 3px #afa9a9;
    padding: 10px 30px;
    margin: 0 auto;
    position: relative;
    font-size: 20px;
    font-weight:600;
    color:#ff931e;
  }
  .main-parent .inner-parent label{
    font-size:30px;
    color: #444;
  }
  .main-parent .inner-parent label p{
    display:inline;
    font-size:16px;
    color:blue;
    font-weight: 600;
  }
  .inner-parent span.bdr:after{
    content: " ";
    width: 3px;
    height: 20px;
    background: #afa9a9;
    left: 265px;
    position: absolute;
    top: 55px;
  }
  .inner-parent ul{        
    width: 80%;
    display: flex;
    list-style: none;
    padding-bottom: 15px;
    margin-left: auto;
    border-top:solid 3px #afa9a9;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .inner-parent ul li{
    margin-top: 15px;
     padding:0 15px;
     position: relative;
  }
  .inner-parent ul li:after{
      content: " ";
      width: 2px;
      height: 18px;
      background:#afa9a9;
      left: 81px;
      position: absolute;
      top: -17px;
  }
  .inner-parent ul li a{
     border:solid 2px #afa9a9;
     padding:10px 5px;
     display:block;
     color:#ff931e;
     font-size:25px;
  }
  .inner-parent ul li a strong{
     display:block;
     font-size:16px;
     color:#008aff;
  }
  .inner-parent ul li a span{
     display:inline;
     border:none;
     font-size:14px;
     color:#6c6c6c;
     font-weight:bold;
  }
</style>