jQueryを使った

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

のような事を、jQueryを使わないJavaScriptで実装したいと思って少し調べてみました。

要素の取得

id属性が設定されている要素（例: <div id="example">example</div>）はgetElementByIdを使って取得できます。

var element = document.getElementById('example');
console.log(element);

特定のclass属性が設定されている要素（例: <div class="example">example</div>）を取得したい場合はgetElementsByClassNameを使います。

var elements = document.getElementsByClassName('example');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

特定のタグが設定されている要素（例: <div>example</div>）を取得したい場合はgetElementsByTagNameを使います。

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; ++i){
  var element = elements[i];
  console.log(element);
}

ちなみに、forの部分は

Array.prototype.filter.call(elements, function(element){
  console.log(element);
});

のような感じで書くこともできるみたいです。

要素にイベントを設定

取得した要素にクリックイベントを設定するにはonclickを使って

element.onclick = function(e){
  console.log('clicked');
};

のようにするか、addEventListenerを使って

element.addEventListener('click', function(e){
  console.log('clicked');
});

のような感じで設定できます。

<a>タグとか、クリックイベントが期待通りに設定できない場合は

e.preventDefault();

を試してみてください。

属性値の取得

例えば、<img>の属性値alt（例: <img src="example.jpg" alt="example">のexample）を取得したい場合はgetAttributeを使って次のようにします。

var text = element.getAttribute('alt');
console.log(text);

まとめ

ということで、最初の

$('img').click(function(){
  var text = $(this).attr('alt');
  console.log(text);
});

をjQueryを使わないで実装してみると、次のような感じになります。

var elements = document.getElementsByTagName('img');
Array.prototype.filter.call(elements, function(element){
  element.addEventListener('click', function(e){
    var text = e.getAttribute('alt');
    console.log(text);
  });
});

リンク

Document.getElementById() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Document.getElementsByClassName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Document.getElementsByTagName() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

GlobalEventHandlers.onclick – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

EventTarget.addEventListener() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Event.preventDefault() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Element.getAttribute() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

関連記事

Scrollorama
スクロールに合わせてアニメーションしてくれるjQuery plugin johnpolacek/scrollorama · GitHubhttps://github.com/johnpolacek/scrollorama demoはこちらです。 scrolloramahttp://johnpolacek.github.io/scrollorama/ ...

jQuery elementを配列に変換する方法
<a>タグのhrefを調べたい場合 $('a').each(function(){ console.log($(this).attr('href')); } のような感じで使うことが多かったのですが、使いたいプラグインの関係で配列に変換する必要があり、簡単な方法を調べてみました。 ということで、mapとmakeArrayを使って次のような感じで配列に変換できるみ...