JavaScriptで何番目のclass属性でイベントが発生したのかインデックスを取得する

開発環境は、Windows 10 Pro(64bit)。

例えば、いいねボタンなどの複数のclass属性(今回はlike_btn)がある中で実際にクリックしたボタンのみを、色づけしたい、あるいは色づけを解除したい場合、jQueryのindexメソッドのようなものを、生のJavaScriptで行うにはどうすればいいのか、調べたのでメモ。コールバック関数clickedとして以下のコードを書く。

clicked(e){
  let doc = document.getElementsByClassName('like_btn');
  doc = [].slice.call(doc);
  let idx = doc.indexOf(e.target);
  console.log(idx);
}

Reactの場合は、e.targetの部分を、e.currentTargetに変える。console.log(e)で中身を見ていて発見した。

getElementsByClassNameで、HTMLCollectionのオブジェクトを取得し、それを、sliceメソッドを用いて、配列としてコピーしたいが、できないので、callメソッドを用いて、裏技的にHTMLCollectionオブジェクトを配列に変換して、その配列にe.targetを引数に指定したindexOfメソッドを用いると取得できる。

参考リンク
Array.prototype.indexOf() - JavaScript | MDN