基于属性使用javascript选择HTML元素

虽然我已经非常精通jQuery，但不幸的是，我的Javascript有点缺乏，并且在这个例子中我无法访问jQuery，所以请不要回答“使用jQuery”

基本上，Google Analytics使我能够跟踪社交点击，因此：

_gaq.push(['_trackSocial', 'facebook', 'like', 'http://domain.com/somepage']); 

现在我的页面上有各种链接，如下所示：

<a href="#myfacebook#" track_social="facebook"><img src="facebook_button" /></a>
<a href="#mytwitter#" track_social="twitter"><img src="twitter_button" /></a>
<a href="#mygoogleplus#" track_social="googleplus"><img src="googleplus_button" /></a>
<a href="#mypinterest#" track_social="pinterest"><img src="pinterest_button" /></a>

但正如我所说的，我没有访问jQuery的权限，那么如何使用通用Javascript实现这一点呢

---

它不一定要使用“track_social”属性，我可以在其中添加其他内容，但它不可能是每个人的唯一ID，因为它们将以多种方式出现在整个站点中，并多次出现在各个页面上。

jQuery可以直接移植到本机DOM API：

Array.prototype.slice.call(
    document.querySelectorAll('a[track_social]')
).forEach(function(i) {
    i.addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);
});

请注意，虽然此代码完全符合标准，但它需要JavaScript 1.6用于

forEach

（在大多数主要浏览器中受支持，但仅在IE 9+中受支持），并且需要

addEventListener

和

querySelectorAll

（在大多数主要浏览器中受支持，但仅在IE 8+中受支持）。如果需要更广泛的浏览器支持，可以添加到此解决方案

---

补充代码#1：

var n=document.querySelectorAll（'a[track\u social]）；
对于（变量i=0；i

您可以选择：

您可以选择类似CSS（和jQuery选择器）的。它提供了一个

NodeList

，它是一个类似于数组的元素集合

var links = document.querySelectorAll('a[track_social]');
//gives us [element,element,element...], loop and attach

for(var i; i<links.length;i++){
    links[i].addEventListener(...);
}

var links=document.querySelectorAll（'a[track\u social]）；
//给我们[element，element，element…]，循环并附加
对于（var i；idosn），虽然不能在所有浏览器中使用……但您至少应该明确指出它在哪里工作以及在哪里不工作。您忘记将$（this.attr（'href'）更改为e.target.getAttribute（'href'））；Felix，在“所有浏览器”中都不起作用，所以这实际上是一个主观问题，即你愿意返回多远。不过，我会用它的工作方式更新我的答案。BenniKa，谢谢；我刚刚修复了这个问题。+1首次看到querySelectAll。我在我的javascript框架中实现了这样的函数，因为我没有k现在，它真的存在了。为答案喝彩这是如何工作的？我首先需要用一些东西填充“数组”吗？一个快速测试会给我以下错误：“array.prototype.slice.call（document.queryselectoral（“A[track\u social]”）。addEventListener不是一个函数”请注意，qSA和aEL都受到IE8及以上版本的支持。是的，我的帖子中有一个链接。
var n = document.querySelectorAll('a[track_social]');
for (var i = 0; i < n.length; i++)
    n[i].addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);

var links = document.querySelectorAll('a[track_social]');
//gives us [element,element,element...], loop and attach

for(var i; i<links.length;i++){
    links[i].addEventListener(...);
}

var links = document.getElementsByTagName('a');

for(var i; i<links.length;i++){
    if(links[i][yourAttribute]){
        links[i].addEventListener(...);
    }
}