title: How to make querySelectorAll select only from child elements of the current element
body: <p>What I'm asking is how to implement the equivalent functionality of jQuery's children() with HTML5's querySelector/querySelectorAll, i.e. how do I designate the current element in the selector pattern.</p>
  
  <p>For example:</p>
  
  <pre><code>  &lt;div id="foo"&gt;
      &lt;div class="bar" id="div1"&gt;
        &lt;div class="bar" id="div1.1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bar" id="div2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>With <code>document.getElementById('foo').querySelectAll('div.bar')</code> all three <code>div</code>s will be selected. What if I only wanna get div1 and div2, not div1's child div1.1? How do I write <code>[[current node]] &gt; div.bar</code> like css selector?</p>
  
  <p>Could anybody shed some light on this?</p>