title: How can I identify every element in the DOM and the order of elements?
body: <p>I want to be able to refer to any element within an HTML DOM and also know what order the elements appear in. I'm hoping elements in the DOM get indexed somewhere from 0 to <em>&lt;number-of-elements-minus-1></em> so that I can identify specific elements and, separately, list those elements in the order they appear within the HTML.</p>
  
  <p>For example, in this HTML, the elements would be numbered from 0 for the <strong>html</strong> element, to 9 for the second <strong>p</strong> element: </p>
  
  <pre><code>&lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;title&gt;Element 2. Page title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 id="mainHead"&gt;Element 4. How to uniquely identify/order DOM elements&lt;/h1&gt;
      &lt;div id="boxedContent"&gt;
          &lt;p class="smallText"&gt;Element 6. I want to be able to &lt;span class="stress"&gt;7. uniquely&lt;/span&gt; identify each element and &lt;i&gt;8. also&lt;/i&gt; determine the order in which elements appear, reading from top to bottom through the HTML.&lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;Element 9&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want a JavaScript/jQuery way of specifying, for example, the <strong>title</strong> element, first <strong>p</strong> element and the <strong>span</strong>. The HTML pages I'll be working with aren't mine, but if there's a whole-DOM element index that I can access I could get to these 3 elements using those index refs - i.e. </p>
  
  <ul>
  <li>title: 2</li>
  <li>first p: 6</li>
  <li>span: 7</li>
  </ul>
  
  <p>The index numbers would allow me to list the elements in order. </p>
  
  <p>Is this possible? How do I do it?</p>