CODEWITHSUNDEEP
javascriptdomhtml-parsingdocument-bodychild-nodes
kkica
kkica

Reputation: 4104

Number of child Nodes on Body element javascript

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>

Upvotes: 0

Views: 2415

Answers (3)

Abhishek Yadav
Abhishek Yadav

Reputation: 1

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>

`

Upvotes: 0

sideshowbarker
sideshowbarker

Reputation: 88066

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.

Upvotes: 0

ppovoski
ppovoski

Reputation: 4793

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.

Upvotes: 1

Related Questions