JavaScriptのみ(Vanilla JS)で何番目の要素がクリックされたのかを取得する方法
jQuery
などのフレームワークを使わず素のJavaScriptのみで、
クリックされた要素が何番目であるかを取得する方法をご紹介します。
目次
実際のコード
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を使うほうが高速化につながります。
- SNIPPET
- JavaScript
- JavaScriptのみ(Vanilla JS)で何番目の要素がクリックされたのかを取得する方法