如何在javascript中获取查询选择器数据属性？

Question

我有一个自定义JS函数，可在加载时在页面中的所有元素中创建/注入自定义链接。

操作之前：

<div class="myimagediv">
       <img class="img-tag" src="#" data-src="alternative content I need" alt="">
    </div>

现在，此自定义函数可以操纵元素：

[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
            old_html = elem.innerHTML;

            new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
            elem.innerHTML = new_html;
        });

新操作的元素：

<div class="myimagediv">
      <a class="customlink" href="this should be the content of my data-src" title="">
          <img class="img-tag" src="#" data-src="alternative content I need" alt="">
      </a>    
    </div>

如何从IMG标签获取data-src属性并将其注入到新创建的自定义链接函数中？

我应该使用var吗？然后调用它，但是我无法掌握如何读取data-src并重新使用它。

任何帮助将不胜感激。

Answer 1

只需使用getAttributeimage元素的方法即可：

var dataSrc = elem.querySelector('img').getAttribute('data-src');

Answer 2

示例 - 如何在 vanilla JS 中读取 data-* 属性：

var elm = document.querySelector('any-tag')
var first = elm.dataset.whatever
var second = elm.dataset.somethingElse // camel case for multi-word

console.log(first, second)

<any-tag data-whatever="value1" data-something-else="value2" />