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