속성을 기반으로 자바 스크립트로 HTML 요소 선택

Question

불행히도 jQuery에 익숙해졌지만 Javascript가 부족하여이 인스턴스에서는 jQuery에 액세스 할 수 없으므로 "jQuery 사용"답변을 사용하지 마십시오. 제가하고 싶은 것은 클릭을 추적 지금

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

:

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

지금 내가 그렇게처럼 내 페이지에 다양한 링크가 있습니다

기본적으로 Google 웹 로그 분석은 그래서 사회적 클릭을 추적 날 수 있습니다 위에서 설명한 Google Analytics 코드를 실행하십시오. 내가 jQuery를 사용하는 경우 I는 다음과 같이 할 것 :

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

을하지만 말했듯이 나는 jQuery를에 액세스 할 수 없습니다 그래서이 사용하는 일반적인 자바 스크립트를 할 것 어떻게?

반드시 "track_social"속성을 사용할 필요는 없지만 뭔가 다른 것을 넣을 수는 있지만 사이트 전체에 걸쳐 여러 가지 방법으로 나타나는 모든 고유 ID는 고유 할 수 없습니다. 다양한 페이지에서 여러 번. 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 (자바 스크립트 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()