【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 );
}, false);
</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を持つ要素の順序を取得します。