DOM Node ,, Why html.childNode[2] is body?-CodePudding

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>document</title>
</head>
<body></body>
</html>

why html.childNode[2] is BODY ??

I think html.childNode[0] is HEAD. and html.childNode[1] is BODY.

But, html.childNode[1] is #text. why this happens?? I can't see any text...

CodePudding user response：

0 - is the head. 1 - is a text node - that linefeed between closing </head> and opening <body>. If you remove the line break, body will have the index 1.

CodePudding user response：

as say in the doc https://developer.mozilla.org/fr/docs/Web/API/Node/childNodes

childNodes includes all child nodes, including non-element nodes like text and comment.

to get only child node element you have to use element.children

var html = document.querySelector('html');

console.log(html.children[0]);
console.log(html.children[1]);

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>document</title>
</head>
<body></body>

</html>