「jQuery」タグアーカイブ

jQueryを使わないで要素を取得したりクリックイベントを設定したりする方法

コメントを残す

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

jQuery elementを配列に変換する方法

コメントを残す

<a>タグのhrefを調べたい場合

$('a').each(function(){
  console.log($(this).attr('href'));
}

のような感じで使うことが多かったのですが、使いたいプラグインの関係で配列に変換する必要があり、簡単な方法を調べてみました。

ということで、mapとmakeArrayを使って次のような感じで配列に変換できるみたいです。

var elems = $('a').map(function(){ return $(this).attr('href'); });
var ar = $.makeArray(elems);

console.log(ar);

実行結果

Array(3) [ "https://example.com/", "https://example.net/", "https://example.org/" ]

リンク

jQuery.makeArray() | jQuery API Documentation
https://api.jquery.com/jquery.makeArray/

.map() | jQuery API Documentation
https://api.jquery.com/map/

jQuery elementをわざわざ配列に変換する機会は多くないと思いますが、必要になったら参考にしてみてください。