Getting children in javascript

Question

How to get children 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 to print the output as "2". But it gives a "5". An element containing id as a "string" has 2 elements, which are so on. But it gives a "5". So how is "5" printed?

Output:

 This is td This is td2 5 

Answer 1

You get 5 because there are two elements and three text nodes inside this line, childNodes is exactly that: child nodes. There are several types of nodes (primarily: elements, text nodes, and comment nodes). Here are the nodes in this 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 only children, use the DOM children property (available for all modern browsers, but not for 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 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 check what is inside child.childNodes ? According to the docs

Spaces within elements are treated as text, while text is treated as nodes. Comments are also considered nodes.

This is why you get 5 instead of 2, as there are 3 additional text nodes that you did not expect. Use child.children .

 $(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 use the console log console.log(child.childNodes)

It also includes spaces before elements and between .childNodes also counts these spaces as children. if you use child.childrens.length , it will ignore spaces and give the score as 2.

Answer 4

You can just use jQuery children() .

 $(function(){ $("#subpage").html($("#row").children().length); /* you could also use $("#subpage").html($("#row").children("td").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> 

Answer 5

W3schools Link - HTMLNOM Property for DOM

Note. Spaces within elements are treated as text, while text is treated as nodes. Comments are also considered nodes.

there,

 <tr id ="row"> newline <td> newline <td> newline </tr> So, it has 5 child Nodes. 

In your case, if the html construct is <tr id="row"><td></td><td></td></tr>, that would be 2

Answer 6

you can just do $("#row td") with jQuery to get the td nested in #row

 $(function(){ var child = $("#row td"); $("#subpage").html(child.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> 

Answer 7

 $("#subpage").html($('#row td').length); 

Answer 8

try the following:

 var c = document.getElementById("subpage").children.length;