title: What are unexpected text nodes?
body: <p>I have a parent Element containing just one child element so as far as I know this parent element has one child node but in console there are three nodes two of them is text node. This is clear in this image.<a href="https://i.stack.imgur.com/q0Wuj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0Wuj.png" alt="unexpected tex node in javascript" /></a>
  Now my questions are:</p>
  <p>1.Where does this text nodes come from?</p>
  <ol start="2">
  <li><p>Are these text node built in? What is the necessity of them?</p>
  </li>
  <li><p>What are the rules of them?</p>
  </li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container = document.getElementById('container');
  var children = container.childNodes;
  console.log(children);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id='test'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>