【JavaScript】要素の順序を取得する方法|slice.call()、indexOf()

今回はJavaScriptで、HTML内の指定した要素の順序を取得する方法となります。

【JavaScript】要素の順序を取得する方法

以下、例となりclassの値menuを持つ要素の中から、classの値currentを持つ要素の順序を取得しています。

<ul>
	<li class="menu"><a href="#">メニューA</a></li>
	<li class="menu"><a href="#">メニューB</a></li>
	<li class="menu current"><a href="#">メニューC</a></li>
	<li class="menu"><a href="#">メニューD</a></li>
<ul>

<script>
document.addEventListener('DOMContentLoaded', function(){
	// 指定したclass名の要素の集合(HTMLCollection)を取得
	var menus = document.getElementsByClassName( "menu" );
	// 要素の集合を配列に変換
	var arrayMenus = Array.prototype.slice.call( menus );
	// 指定したclass名の最初の要素を取得
	var current = document.getElementsByClassName( "current" )[0];
	// 配列から指定した要素の順序を取得
	var index = arrayMenus.indexOf( current );

	console.log( index ); 
});
</script>

上記例のconsole.log()の出力結果は2となります。

ソースコードの説明

以下、JavaScriptコードのポイントなる箇所の説明となります。

HTMLCollectionを配列に変換|slice.call()

まず、ソースコード10行目からの箇所で、getElementsByClassNameメソッドを利用し、ページ内からclassの値menuを持つ要素の集合(HTMLCollection)を取得します。

そして、HTMLCollectionなどを配列に変換できるslice.callメソッドを利用し、classの値menuを持つ要素の集合を配列に変換します。

配列から指定した要素の順序を取得|indexOf()

次に、ソースコード14行目からの箇所で、getElementsByClassNameメソッドを利用し、ページ内からclassの値currentを持つ最初の要素を取得します。

そして、配列から指定した要素の順序を取得できるindexOfメソッドを利用し、前述で変換した配列から、classの値currentを持つ要素の順序を取得します。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。