Getting Child Elements in Javascript [duplicate]

Question

How to get the child elements in HTML using JavaScript?

Program:

$(function(){
  var child = document.getElementById("row");
  var i;
  $("#subpage").html(child.childNodes.length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<div id="subpage"> </div>

I expect the above program will print output as "2". But it gives "5". The element which contains id as "row" have 2 elements which is td. But it gives "5". So how "5" is printed ?

Output:

This is td  This is td2
5

Answer 1

You're getting 5 because there are two elements and three text nodes inside that row, childNodes is exactly that: child nodes. There are multiple kinds of nodes (primarily: elements, text nodes, and comment nodes). Here are the nodes in that structure:

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  for (i = 0; i < child.childNodes.length; ++i) {
    
    console.log(i + ": nodeType = " + child.childNodes[i].nodeType);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<div id="subpage"> </div>

If you want just child elements, use the DOM's children property (available on all modern browsers but not some very old ones):

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  for (i = 0; i < child.children.length; ++i) {
    
    console.log(i + ": nodeType = " + child.children[i].nodeType);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<div id="subpage"> </div>

...or jQuery's children method:

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  $(child).children().each(function(i) {
    console.log(i + ": nodeType = " + this.nodeType);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<div id="subpage"> </div>

Answer 2

Why don't you inspect what sits inside child.childNodes? According to docs

Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.

This is why you are getting 5 instead of 2 as there are 3 additional text nodes which you didn't expect. Use child.children instead.

$(function(){
  var row = document.querySelector('#row');
  var row_no_ws = document.querySelector('#row_no_ws');
  var subpage = document.querySelector('#subpage');
  subpage.innerHTML = 'Row childNodes: ' + row.childNodes.length + '<br>' +
      'Row using children: ' + row.children.length + '<br>' +
      'Row childNodes no whitespaces: ' + row_no_ws.childNodes.length
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<table>
  <tr id="row_no_ws"><td> This is td </td><td> This is td2 </td></tr>
</table>

<div id="subpage"> </div>

Answer 3

If you do console log console.log(child.childNodes)

It also includes whitespaces before elements and between .childNodes also count those whitespaces as child. if you use child.childrens.length it will ignore whitespaces and give count as 2.