title: How to run getElementsByTagName on children of an element only?
body: <p>I'm having trouble getting a selector to work properly.</p>
  
  <p>I have this HTML:</p>
  
  <pre><code>&lt;div.wrapper&gt;
      &lt;div.ui-controlgroup-controls&gt;
          &lt;form&gt;
              &lt;div.ui-btn&gt;&lt;/div&gt;
          &lt;/form&gt;
          &lt;div.ui-btn&gt;&lt;/div&gt;
          &lt;div.ui-btn&gt;&lt;/div&gt;
          &lt;div.ui-btn&gt;&lt;/div&gt;
          &lt;div.ui-btn&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I'm trying to select the <code>div</code> tags, which are children of <code>ui-controlgroup-controls</code> - which means excluding whats inside the form.</p>
  
  <p>This is what I'm trying:</p>
  
  <pre><code>// el is my div.wrapper element
  el.children[0].getElementsByTagName("div");
  </code></pre>
  
  <p>However this does not work, because the div inside the form ends up in the selection.</p>
  
  <p><strong>Question</strong>:<br>
  How can I select the elements correctly when I don't want to use jQuery?</p>