Number of child Nodes on Body element javascript

Question

Number of child Nodes on Body element javascript

2.2k views Asked by kkica At 04 January 2017 at 00:30

The number of child nodes on Body element is 1 even though there is nothing there. This happens only with Body element, but not for other elements, such as div for example. In that case the result is 0. Why is that?

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

while the result of this is 0

<!Doctype html>
<html>
<head>
<script>
  function run() {
    alert(document.body.getElementsByTagName("div")[0].childNodes.length);
  }
   window.addEventListener("load",run,false);
</script>
</head>
<body>
<div></div>
</body>
</html>

Original Q&A

There are 3 answers

ppovoski On 04 January 2017 at 01:52

There is whitespace inside the body. Whitespace is considered 'text' and 'text' is considered a node.

If you change your code slightly, you can output the nodeName. In this case it outputs #text.

Since we already know there is 1 node, we can simply output childNodes[0]. If you had more than one, you can loop over them and output each.

<head>
<script>
    function run() {
      alert(document.body.childNodes[0].nodeName);
    }
    window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

I can't get rid of the whitespace in the body tag, but I can in the div tag.

<!Doctype html>
<html>
<head>
<script>
  function run() {
        var length = document.body.getElementsByTagName("div")[0].childNodes.length;
        if(length > 0) {
            length += "\n" + document.body.getElementsByTagName("div")[0].childNodes[0].nodeName;
        }
    alert( length );
  }
   window.addEventListener("load",run,false);
</script>
</head>
<body>
<div></div>
</body>
</html>

If you add any whitespace between the div tags (space, newline, etc) the alert will have a text node.

EDIT: It appears to be related to the browser. This is the behavior in IE, Firefox and Chrome. I am unsure if other browsers behave in this manner.

Abhishek Yadav On 26 December 2022 at 10:36

There is one tag counted as child node and if you haven't included your custom script than also it own JavaScript for html Dom which is counted. you can check by code `

console.log(document.querySelector('body').children);

<!DOCTYPE html>
<html lang="en">
<head>
  
    <title>Document</title>

</head>
<body></body>

</html>

`

**sideshowbarker** · Accepted Answer · 2017-01-04 15:30:57

Due to requirements of the HTML parsing algorithm, in the DOM that body in the code snippet in the question ends up containing two line breaks. So it does have a text node child in the DOM.

Try document.documentElement.innerHTML with that doc—e.g., just modify the code snippet like:

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
    alert(document.documentElement.innerHTML);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

…and what you will get back is this:

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
    alert(document.documentElement.innerHTML);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body>


</body>

Or just inspect the document in the question in browser devtools or using Live DOM Viewer.

TechQA.

Number of child Nodes on Body element javascript

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in DOM

Related Questions in HTML-PARSING

Related Questions in DOCUMENT-BODY

Related Questions in CHILD-NODES

Popular Questions

Popular Tags

Trending Questions