title: how to get query selector data attribute in javascript?
body: <p>I have a custom JS function that creates/inject a custom link into all elements in the page when it loads. </p>
  
  <p>Before manipulation:</p>
  
  <pre><code>&lt;div class="myimagediv"&gt;
         &lt;img class="img-tag" src="#" data-src="alternative content I need" alt=""&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and now this custom function manipulates the element:</p>
  
  <pre><code>[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
              old_html = elem.innerHTML;
  
              new_html = '&lt;a class="customlink" href="' + elem.querySelector('img').src + '"&gt;' + old_html + '&lt;/a&gt;';
              elem.innerHTML = new_html;
          });
  </code></pre>
  
  <p>The newly manipulate element:</p>
  
  <pre><code>&lt;div class="myimagediv"&gt;
        &lt;a class="customlink" href="this should be the content of my data-src" title=""&gt;
            &lt;img class="img-tag" src="#" data-src="alternative content I need" alt=""&gt;
        &lt;/a&gt;    
      &lt;/div&gt;
  </code></pre>
  
  <p>How can I get the data-src attribute from the IMG tag and inject it into my newly created custom link function?</p>
  
  <p>I should use a var? and then call it, but I cannot grasp how to read the data-src and re-use it.</p>
  
  <p>Any help would be very much appreciated. </p>