getElementsByClassNameで複数取得したクラスのthisについて

すでに解決はしているのですが、「こんなに書くの？」と疑問に思った事があったので教えて下さい。

現在、jQueryで作成したものを素のJavaScriptで書き直す作業をしているのですが、
html内に複数個ある特定のクラスを取得し、そのうちのどれをクリックしたのかを取得する、という部分で詰まりました。

下記のstackoverflowの一番評価されている回答（現在15票）を参考にして僕も解決できたのですが、これが本当に最適解なのか、ES2015以降でもっとスマートな方法が出てきていないのか、お知恵を頂きたいです。

How to get current element in getElementsByClassName

jQueryだと

$(".test").click(function() {
$(this).html("New Text");
});

と、とてもシンプルなのにまさかここまでとは、、、

問題自体は解決していますのでさらっとでも回答いただけますと幸いです、よろしくお願い致します！

行動規範の内容に同意します

回答3件

ES2015 とあったので、私ならこんな感じです。

;[...document.querySelectorAll(".test")].forEach(e => {
	e.addEventListener("click", function(){
		this.innerHTML = "New Text"
	}, false)
})

現状のChromeだと [...doc～] のところがまだ動かないので、

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]

で対応できます。
Firefoxだとこれは不要です。

querySelectorAll や addEventListener は長いので、私はよく関数定義しておいてこんな感じで書けるようにしてます。

;[...$$(".test")].forEach(e => {
	e.on("click", function(){
		this.innerHTML = "New Text"
	})
})

投稿2016/01/24 04:06

編集2016/01/24 04:07

lazex

総合スコア604

tm_rhcp

2016/01/24 08:29

回答頂きありがとうございます！ひとつ目とふたつ目の書き方、どちらも少しだけ見覚えはあるけど意味はわからない、という状況だったので、参考にさせていただきます！

行動規範の内容に同意します

jQueryに影響を受け、ビルドインにも互換性のあるメソッドが実装されました。
element.querySelector、element.querySelectorAllがそうです。

document.querySelectorAll('.test')は、読み込み済みのDOMツリーに対して、一致するcssセレクタの要素群を、NodeListで返します。

DEMO

html
1<head>
2
3<script>
4  document.addEventListener('DOMContentLoaded',function(){
5    var nodes= document.querySelectorAll('.test')
6    for(var i=0; i<nodes.length; i++){
7      nodes[i].innerHTML= 'New Text'
8    }
9  })
10</script>
11
12</head>
13<body>
14
15<ul>
16  <li class="test">Lorem ipsum dolor</li>
17  <li class="test">Fugiat reprehenderit</li>
18  <li class="test">Optio maxime est totam</li>
19  <li class="test">Labore facere rem architecto</li>
20  <li class="test">Assumenda odit unde dicta vel?</li>
21</ul>
22
23</body>

NodeListはArrayの持つ.forEachはありませんので、for構文を使用するか、Array.prototype.forEach.callを使用して下さい。

投稿2016/01/23 19:03

horse_n_deer

総合スコア452

tm_rhcp

2016/01/24 08:19

NodeListの扱いにまだ慣れていないので大変参考になりました！ 2種類の回し方があるんですね…。（forの方しか知りませんでした）教えて頂きありがとうございました！

行動規範の内容に同意します

ベストアンサー

リンク切れで見えませんが、下記スレッドの話でしょうか。

javascript - How to get current element in getElementsByClassName - Stack Overflow

一般解は Array#forEach もしくは for 文でループさせるコードになると思われます。

HTML
1<ul id="sample">
2  <li class="test">text</li>
3  <li class="test">text</li>
4  <li class="test">text</li>
5  <li class="test">text</li>
6</ul>
7<script>
8'use strict';
9function handleClick (event) {
10  this.textContent = 'new text';
11}
12
13Array.prototype.forEach.call(document.getElementsByClassName('test'), function (element) {
14  element.addEventListener('click', handleClick, false);
15});
16</script>

ただ、このやり方では要素の数だけメモリを消費するので上位ノードで一つだけイベント定義する方法がお勧めです。

HTML
1<ul id="sample-2">
2  <li class="test">text</li>
3  <li class="test">text</li>
4  <li class="test">text</li>
5  <li class="test">text</li>
6</ul>
7<script>
8'use strict';
9function handleClick (event) {
10  var li = event.target;
11
12  if (li.tagName === 'LI') {
13    li.textContent = 'new text';
14  }
15}
16
17document.getElementById('sample-2').addEventListener('click', handleClick, false);
18</script>

listener 関数内の this 値 (DOM 4)
listener 関数内での this 値は event.currentTarget と等価ですが、this 値の規定は DOM 4 で始めて取り込まれた比較的新しい仕様です。
後方互換性の為に event.currentTarget を利用した方が好ましいと思います。
this 値は handleEvent でも変更可能な可変値ですので、そういった意味でも event.currentTarget の方に安定性があります。

Re: itottm さん

投稿2016/01/23 13:13

編集2016/01/25 00:55

think49

総合スコア18162

tm_rhcp

2016/01/24 07:57

早速の回答有難うございました！リンク切れの補足ありがとうございます、そちらのページで間違いないですー！だいぶスッキリとした見栄えになって覚えやすくなりました、 idも絡めて実装してみます！

think49

2016/01/25 00:59

「listener 関数内の this 値」について追記しました。それから、今回は分かりやすさを重視して textContent を使いましたが、テキストノードを上書きする必要もないので element.firstChild.data = 'new text'; のようにテキストノード値を書き換えると DOM らしいと思います。せっかく DOM API を使うのですから jQuery では出来なかった事に挑戦すると面白いのではないかと思います。

行動規範の内容に同意します

あなたの回答