JavaScriptのみ（Vanilla JS）で何番目の要素がクリックされたのかを取得する方法

jQueryなどのフレームワークを使わず素のJavaScriptのみで、
クリックされた要素が何番目であるかを取得する方法をご紹介します。

目次

• 実際のコード

• 実装についての解説

  • querySelectorAll
  • forEach
  • addEventListener
  • indexOf

• 最後に

実際のコード

const elms = document.querySelectorAll(".elements");
let index;
elms.forEach((elm) => {
  elm.addEventListener("click", () => {
    index = [].slice.call(elms).indexOf(elm);
  });
});

実装についての解説

ご紹介したJavaScriptについて解説します。

const elms = document.querySelectorAll(".elements");// elementsクラスを持つ要素をすべて取得
let index;// クリックした要素のインデックスを格納する変数
elms.forEach((elm) => {// elementsを持つ要素すべてに以下の処理を追加する
  elm.addEventListener("click", () => {// クリックしたときに
    index = [].slice.call(elms).indexOf(elm);// インデックスを変数indexへ格納する
  });
});

querySelectorAll

getElementByIdやgetElementsByTagNameに比べるとパフォーマンスは少し劣りますが、
jQueryライクな指定ができるquerySelectorAllを利用しました。

$(“.elements”)と同じ感覚で、クラス名やタグ名を指定し要素を手軽に取得できます。

今回は複数要素の取得が必要だったのでAllを利用しましたが、
単一の要素の場合は以下のようにquerySelectorを使っての取得になります。

const elm = document.querySelector(".element");// elementクラスを持つ要素のうち最初に見つかったもののみ取得

forEach

配列.forEach()は、配列が持つすべての要素に対して繰り返し処理を実行する関数です。

どの要素もクリックした場合にイベントが発火する実装が必要なため、
forEachを使ってすべての要素に設定しました。

以下部分のelmについては任意の名称となり、
forEachの処理の中では取り出した要素がこのelmに相当します。

const elms = document.querySelectorAll(".elements");
elms.forEach((elm) => {// elmsから取り出した要素はelmに入っている
  elm.addEventListener("click", () => {
    index = [].slice.call(elms).indexOf(elm);
  });
});

なお、正確にはquerySelectorAllで取得した要素は配列ではなくNodeListになります。
※配列と同じようにforEachの利用が可能。

addEventListener

イベントのトリガーとしてaddEventListenerを採用しています。

「クリックされた要素は自分と同じクラスを持つ要素の中で何番目かを返す」
という実装内容のためtypeはclickを指定しました。

用意されているトリガーは様々あり、例えば以下のように指定すると
対象となるinput要素の中身が変更される度に処理を行うという実装も可能です。

<form action="" method="post">
  <input type="text" class="test-field">
</form>

const field = document.querySelector(".test-field");
field.addEventListener("keyup", () => {
  // ここに処理を書く
});

indexOf

指定した要素が配列の何番目にあるのか（インデックス）を取得する方法は
indexOfメソッドを利用しました。

ただし、このメソッドはNodeListには利用ができないため
以下の記述で配列へ変換したうえで実行しています。

[].slice.call(array).indexOf(element);
// [].slice.callはArray.prototype.slice.callの省略形。

最後に

WEBサイトを実装する際にjQueryを使う機会は、まだまだ非常に多いと思います。

ただフレームワークの読み込みによる遅延を考慮し、あえて使う必要がない場合は
軽量な素のJavaScriptを使うほうが高速化につながります。