이런 HTML 문서가 있을 때 class 속성값이 box-1인 요소 노드를 선택하려면 어떻게 해야 할까요? querySelector() 메서드로는 다음과 같이 작성하면 됩니다.

<script>
  const el = document.querySelector(".box-1");
</script>

이번에는 class 속성값이 box-1인 요소의 하위에 있는 p 태그를 가져와 보겠습니다. 먼저 class 속성값을 사용하는 getElementsByClassName() 메서드로 다음처럼 작성할 수 있습니다.

<script>
  const el = document.getElementsByClassName("box-1")[0].children;
  console.log(el);
</script>

그림 12-4 실행결과