javascript - 按属性定位链接

Question

我正在尝试通过 javascript 激活一个链接，如下所示：

<a class="second_link nobold" data-type="via_mail" href="http://swap.mtr.com/index.php?id=10&ctid=546432#">Send via mail</a>

我考虑过通过 定位链接class，但该类有很多链接。
如何通过 激活链接data-type="via_mail"？

Answer 1

如果您只针对现代浏览器，您可以使用document.querySelector

document.querySelector('a.second_link[data-type="via_mail"]').click();

如果你可以使用 jQuery：

$('.second_link[data-type="via_mail"]').click();

如果以上都没有帮助，你需要再写一些......

var ele = document.getElementsByTagName('a');
for (var i = 0; i < ele.length; i++)
    if (ele[i].getAttribute('data-type') == 'via_mail')
        ele[i].click(); 

现场演示

Answer 2

根据您计划支持的浏览器，您可以querySelectorAll使用大多数现代浏览器：

document.querySelectorAll("a[data-type='via_mail']");

Answer 3

正如其他人所展示的，如果使用/可以使用jQuery，你可以简单地拥有：

var link = $("a[data-type='via_mail']")[0];

但是，如果您要支持的浏览器实现querySelector/ querySelectorAll，您可以简单地拥有：

var link = document.querySelector("a[data-type='via_mail']");

无需额外的库。

Answer 4

这个 javascript 应该适用于每个浏览器：

var anchors = document.getElementsByTagName("a");
for (i=0; i < anchors.length; i++) {
    if (anchors[i].getAttribute("data-type") == "via_mail") {
        // GOTCHA!
    }
}

如果你可以使用 jQuery 属性选择器：

$('a[data-type="via_mail"]');