querySelector로 index 조회

jquery의 index()처럼 특정 nodeList가 몇번째 index인지 조회하는 방법입니다.
아래와 같이 active class를 갖고있는게 몇번째 index인지 찾습니다.

 

<ul class="nav">
  <li>list1</li>
  <li>list2</li>
  <li class="active">list3</li>
  <li>list4</li>
</ul>

 

 

// jquery
$('.nav .active').index(); // 2


// vanilla js
Array.from(document.querySelectorAll('.nav li')).indexOf(document.querySelector('.active')); // 2

 

ES2015에서 추가된 Array.from() 메서드를 사용하면 NodeList나 HTMLCollection을 배열로 반환 받을 수 있습니다.