Javascript - child node count

Question

<ul>     <li>Array1</li>     <li>Array2</li>     <li id="element">Array3</li> </ul> <script>    var temp = document.getElementById('element').parentNode;    child = temp.childNodes;    console.log(temp.length); </script> 

I need to get the child node length using element id. My code returns 7 as a result but I have only 3 nodes.

Answer 1

childNodes gets all existing childNodes, including text nodes! In your example markup, you have your three "regular nodes" and 4 text nodes - the linebreaks - resulting in a total of 7 child nodes.

What you instead want is .children.length or .childElementCount (not supported in IE<9) to only fetch "actual" nodes:

let temp = document.getElementById('element').parentNode; console.log(temp.children.length); // or the following console.log(temp.childElementCount);