앞에서는 예제 코드에서 단일 노드만 선택해 조작했습니다. 그래서 이번에는 querySelectorAll() 메서드로 복수의 노드를 선택하는 방법으로 코드를 작성했습니다. querySelectorAll() 메서드로 button 태그에 해당하는 노드를 한 번에 선택합니다. 그리고 forEach() 메서드로 반복해서 각 노드에 접근한 뒤, dataset 속성으로 data-cnt 속성 정보를 가져와 출력합니다.

실행결과를 보면 dataset 속성으로 노드의 data-* 속성에 대한 정보를 가져오고 이 정보가DOMStringMap 객체에 담겨 반환됩니다. 이 중에서 정확하게 data-cnt 속성의 값만 가져오고 싶으면 다음처럼 객체 속성에 접근하는 방법을 사용합니다.

<script>
  const buttonEls = document.querySelectorAll("button");
  buttonEls.forEach((el) => {
    console.log(el.dataset.cnt);
  })
</script>

실행결과

10
0