title: Is there a way not to chain querySelectorAll with getElementsByTagName?
body: <p>I'm trying to get the image from this page: <a href="http://m.piperlime.gap.com/product.html?dn=pp438556002&amp;dv=1&amp;vid=1&amp;cid=64413&amp;pid=438556002" rel="nofollow">http://m.piperlime.gap.com/product.html?dn=pp438556002&amp;dv=1&amp;vid=1&amp;cid=64413&amp;pid=438556002</a></p>
  
  <p>Right now my code is: </p>
  
  <pre><code>var image = document.querySelectorAll('[data-index="0"]')[0]
  .getElementsByTagName('img')[0].src;
  </code></pre>
  
  <p>Is there a less cumbersome way to go about this? Assume I need to pull the div that includes <code>data-index="0"</code>.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: the HTML I'm trying to get is this:</p>
  
  <pre><code>&lt;div class="gm_product_item" data-index="0" style="width: 450px; left: 0px; transition: 0ms; -webkit-transition: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);"&gt;
      &lt;img class="gm_product_itemimg" alt="Mid Rise 11&amp;amp;#34; Skinny Product Image" src="http://www.gap.com/webcontent/0008/860/774/cn8860774.jpg"&gt;
  &lt;/div&gt;
  </code></pre>