属性に基づいたjavascriptでHTML要素を選択

Question

私はjQueryに精通していますが、残念ながら私のJavascriptは多少不足しています。このインスタンスでは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> 

は、今私が望むものをクリックを追跡することです上記のGoogleアナリティクスコードを実行します。私はjQueryのを使用していた場合、私はこのようなものだろう：

$('a[track_social]').click(function(){ 
    _gaq.push(['_trackSocial', $(this).attr('track_social'), 'click', $(this).attr('href')]); 
}); 

をしかし、私が言ったように私はjQueryのへのアクセスを持っていないので、私はこの使用して、一般的なJavascriptを行うだろうか？

「track_social」属性を必ずしも使用する必要はありませんが、何か他のものを入れることもできますが、サイト全体で複数の方法で表示されるので、さまざまなページで複数回jQueryのは、ネイティブのDOM APIへの直接移植することができることを

Answer 1

：

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); 
}); 

このコードは、標準に完全に準拠している間、それはだけで、ほとんどの主要なブラウザでサポートされているforEach（のためにはJavaScript 1.6を必要とすることに注意してくださいIE 9以上）、それにはaddEventListenerとquerySelectorAll（ほとんどの主要なブラウザでサポートされていますが、IE 8以降のみ）が必要です。より広いブラウザサポートが必要な場合は、このソリューションに追加することができます。

---

補足コード＃1：

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); 

Answer 2

あなたは選択肢があります。

あなたはCSS（とjQueryのセレクタ）のような役割を果たしquerySelectorAll()のために行くことができます。それは検索された要素の配列のようなコレクションである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(...); 
} 

別の方法は、すべての<a>のタグを取得し、あなたの属性の

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

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

それらをテストすることですが、いくつかの注意点があります。 querySelectorAll()はnot supported by some browsers（スクリューIE）である。また、IEのバージョンはaddEventListener()です。これはattachEvent()