title: How are nodes laid within the DOM tree?
body: <p>I am learning JavaScript.
  I am new to the topic of Document Object Model (DOM).</p>
  
  <p>I am confused about how are nodes laid within the DOM tree?</p>
  
  <p>I used this HTML file.  </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="page"&gt;
  &lt;h1 id="header"&gt;List&lt;/h1&gt;
  &lt;h2&gt;Buy groceries&lt;/h2&gt;
  
  &lt;ul&gt;
  &lt;li id="one"&gt;&lt;em&gt;emText&lt;/em&gt;directText&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div id='TDiv'&gt;
  &lt;h1 id='travelhead'&gt;headText&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;script src="javac.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I used this JavaScript file. </p>
  
  <pre><code>var li = document.getElementById('one');
  
  var emText = li.firstChild.firstChild.nodeValue;
  var directText = li.firstChild.nextSibling.nodeValue;
  
  document.write(emText + '&lt;br /&gt;');
  document.write(directText + '&lt;br /&gt;');
  
  var div = document.getElementById('TDiv');
  var headText = div.firstChild.nextSibling.firstChild.nodeValue;
  document.write(headText);
  </code></pre>
  
  <p>The two variables:  </p>
  
  <p><code>var li = document.getElementById('one');</code><br>
  <code>var div = document.getElementById('TDiv');</code></p>
  
  <p>hold the location of the <code>li</code> element node and <code>div</code> element node within the DOM tree.  </p>
  
  <p><strong>Although this line gives the right answer but it is formulated unexpectedly:</strong></p>
  
  <pre><code>var headText = div.firstChild.nextSibling.firstChild.nodeValue;
  </code></pre>
  
  <p>It is used to get the text value of the text node within the <code>H1</code> node element within the <code>DIV</code> node element. So I expected it to be written like this:</p>
  
  <pre><code>var headText = div.firstChild.firstChild.nodeValue;
  </code></pre>
  
  <p><code>DIV</code> has <code>H1</code> as a first child, and in turn <code>H1</code> has a first child of Text node.</p>
  
  <p><code>div.firstChild</code> should returns <code>H1</code>.<br>
  <code>div.firstChild.firstChild</code> should returns the Text node of <code>H1</code>.<br>
  <code>div.firstChild.firstChild.nodeValue</code> should returns the value of the Text node.</p>
  
  <p>How are those nodes really laid within the DOM tree?!</p>