[Javascript] querySelector를 사용하여 active클래스가 있는 index 조회

JQuery의 'index()' 메서드와 특정(active클래스) NodeList가 몇번째 index인지 조회 할 수 있는 방법이다.

 

<ul>
    <li class="item">item1</li>
    <li class="item active">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
</ul>

위의 item 이라는 li 요소들 중 active 클래스를 가진 요소의 index를 찾고자 한다. 

제이쿼리 방식으로 했을때는 아래와 같이 찾았었다.

$(".item.active").index() // 값은 1이 출력된다.

 

바닐라 JS로도 간단하게 찾을 수 있다.이땐 Array.from()과 indexOf() 메서드를 사용한다.

Array.from(document.querySelectorAll(".item")).indexOf(document.querySelector(".item.active"))
//출력되는 값은 1로 제이쿼리와 동일하게 나온다

Array.from() 메서드를 사용하면 querySelectorAll() 로 생성한 NodeList 혹은 HTML컬렉션을 배열로 반환 받을 수 있어 index를 찾을 수 있게 한다.