title: How do I select a specific double-nested element inside a div without jquery?
body: <p>I am using a script called swipeview to put multiple instances of a gallery on a page. It generates the structure like this:</p>
  
  <pre><code>&lt;div id="slider-1"&gt;
      &lt;div id="swipeview-slider"&gt;
          &lt;div id="swipeview-masterpage"&gt;
              &lt;img src="images/01.jpg" id="one"/&gt;
          &lt;/div&gt;
          &lt;div id="swipeview-masterpage" class="swipeview-active"&gt;
              &lt;img src="images/02.jpg" id="two"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="slider-2"&gt;
      &lt;div id="swipeview-slider"&gt;
          &lt;div id="swipeview-masterpage"&gt;
              &lt;img src="images/01.jpg" id="one"/&gt;
          &lt;/div&gt;
          &lt;div id="swipeview-masterpage" class="swipeview-active"&gt;
              &lt;img src="images/02.jpg" id="two"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The only thing that is unique to each image is the top-level div ID (slider-1, slider-2).</p>
  
  <p>Without using jQuery, how can I get the ID of each separate image within the 'swipeview-active' class?</p>
  
  <p>With jQuery I would select them with something along these lines:</p>
  
  <pre><code>$('#slider-1 &gt; .swipeview-slider &gt; .swipeview-masterpage .swipeview-active &gt; img ').attr('id');
  </code></pre>
  
  <p>How can I do achieve this in regular js?</p>