title: in querySelector: how to get the first and get the last elements? what traversal order is used in the dom?
body: <p>in a div, have elements (not necessarily 2nd generation) with attribute <code>move_id</code>.</p>
  
  <p>First, would like most direct way of fetching first and last elements of set</p>
  
  <p>tried getting first and last via:</p>
  
  <pre><code>var first = div.querySelector('[move_id]:first');
  var last  = div.querySelector('[move_id]:last');
  </code></pre>
  
  <p>this bombs because :first and :last were wishful thinking on my part (?)</p>
  
  <p>cannot use the Array methods of <code>querySelectorAll</code> since <code>NodeList</code> is not an Array:</p>
  
  <pre><code>var first = (div.querySelectorAll('[move_id]'))[0];
  var last  = (div.querySelectorAll('[move_id'])).pop();
  </code></pre>
  
  <p>this bombs because <code>NodeList</code> does not have method <code>pop()</code></p>
  
  <p>(yes, one could could use Array methods on top of the NodeList:</p>
  
  <pre><code>var first = div.querySelector('[move_id]');
  var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));
  </code></pre>
  
  <p>this works, and is what I'm using now, but thinking there has to be something more direct that I'm simply missing)</p>
  
  <p>Second, need to verify that the elements are listed by pre-oder depth-first traversal as per <a href="http://en.wikipedia.org/wiki/Tree_traversal" rel="noreferrer">http://en.wikipedia.org/wiki/Tree_traversal</a></p>