Practice Code
JavaScript Example (Program)
Learn Details

What is DOM children

dom children एक ऐसा method है जिसमें किसी parent element के द्वारा उसके child या children को find किया जाता है। उन find किये हुए Element के साथ कुछ भी जैसे की style कर सकते हैं

Syntax :

attributename.child

Note :यह find किये हुए Parent के अंदर जितने child होते हैं, सभी को object के रूप में return करता है | इसलिए particular child को return करने के लिए उसके indexing का use करना होता है ex. for: attributename.child[0]

Example 1. Multiple Function Call with single event

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.children;//It returns the whole child as an object.            
a.children[0];//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.children[0].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 childNodes

childNodes भी child element की तरह किसी parent के सभी child की तरह काम करता है।

Different between childNodes & child element

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

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

Syntax :

attributename.childNodes

Note :यह भी find किये हुए Parent के अंदर जितने child होते हैं, सभी को object के रूप में return करता है | इसलिए particular child को return करने के लिए उसके indexing का use करना होता है ex. for: attributename.child[0]

Example 1. Multiple Function Call with single event

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>