title: DOM tree structure
body: <p>I have a line of HTML source code like:</p>
  
  <pre><code>&lt;span class="price proPrice" itemprop="priceCurrency" content="USD"&gt;US $&lt;span itemprop="lowPrice"&gt;9.76&lt;/span&gt; - &lt;span itemprop="highPrice"&gt;13.26&lt;/span&gt;  &lt;/span&gt;
  </code></pre>
  
  <p>I wonder if the corresponding DOM tree should be:</p>
  
  <pre><code>      &lt; s  p  a  n  &gt;
        /     |     |   \
     [US $] &lt;span&gt; [-]  &lt;span&gt; 
              |           |
            [9.76]     [13.26]
  </code></pre>
  
  <p>Where "[ ]" contains the "#text" nodes. The above code displays as <code>US $9.76 - 13.26</code></p>
  
  <p>I'm learning the DOM tree structure myself but I get kind of confused here. Also I'd like to know whether leaf nodes can only be text nodes or img nodes? Thanks a lot!</p>