<!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...
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.
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>