Noob_Number_1 Noob_Number_1 - 16 days ago 7
Javascript Question

Why there's a text node between head and body nodes in DOM tree?

I'm messing around with DOM tree. In particular with this HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MovieApp</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<h1>MovieApp</h1>
<input type="text" name="movie-title" size="50"
placeholder="Enter movie title..." />
<input type="submit" name="search" value="Search"/>
</div>
</body>
</html>


and there's something I'm not able to figure out. When I check node children (
document.documentElement.childNodes[i]
) I always get three children instead of the two I was expecting to:


  1. <head>
    node

  2. #text

  3. <body>
    node



What is this
#text
node? In JSFiddle I'm getting same result.

Thanks in advance.

enter image description here

Answer

Look at the textContent or other similar properties - it's a line feed and a few spaces, which is exactly between your </head> and <body>.

So there's nothing "useful" between head and body, but that space is still there.

Consider:

<div><a href="#">Some Link</a> Some Text <a href="#">Another Link</a></div>

This would have three nodes - the first link, the text, and the second link. Same deal, except your "text" is just a bunch of whitespace.

Comments