2.2.2 document.querySelector

document.querySelector 메서드는 DOM에서 원하는 노드를 선택할 수 있는 매우 유용한 함수입니다. 이 메서드는 CSS 선택자 구문을 사용하여 특정 요소를 선택하며, 처음 발견된 요소를 반환합니다. 주의할 점은, 반환되는 요소가 없을 경우 null을 반환한다는 것입니다.

기본 사용법

const element = document.querySelector('선택자');

예를 들어, HTML 문서에 id가 "myElement"인 요소가 있을 때, 이 요소를 선택하는 방법은 다음과 같습니다:

const myElement = document.querySelector('#myElement');

예제 1: 요소 선택하기

HTML 문서에서 특정 클래스를 가진 첫 번째 요소를 선택해보겠습니다.

<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
<script>
    // 첫 번째 .box 요소 선택
    const firstBox = document.querySelector('.box');
    console.log(firstBox.textContent);  // 출력: 첫 번째 박스
</script>

실습

다음의 코드를 사용하여 첫 번째 <p> 요소를 선택하고, 배경색을 변경하는 코드를 작성해보세요.

<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<script>
    // 이곳에 코드를 작성하세요
</script>

응용

이제 document.querySelector를 사용하여 모달 창을 제어하는 간단한 예제를 만들어봅시다. 모달이 열리도록 버튼을 클릭하면, 모달을 보여주는 함수를 작성해보세요.

<button id="openModal">모달 열기</button>
<div id="myModal" style="display:none;">모달 내용</div>
<script>
    const openModalButton = document.querySelector('#openModal');
    const modal = document.querySelector('#myModal');

    openModalButton.addEventListener('click', () => {
        modal.style.display = 'block'; // 모달 창 보여주기
    });
</script>

정리

document.querySelector를 사용하면 복잡한 선택자도 간단하게 구현할 수 있습니다. 이 메서드는 DOM 조작을 할 때 매우 자주 사용되며, 특정 요소를 선택할 수 있는 능력을 가지므로, DOM과의 상호작용에서 매우 중요합니다.

실습 과제

1. 여러 개의 요소 중 첫 번째와 두 번째 요소를 선택하여 각각 다른 스타일을 적용해보세요.
2. 모달창을 닫는 버튼을 추가하고, 클릭 시 모달창이 사라지도록 구현해 보세요.