자바스크립트 querySelector

querySelector는 CSS 선택자를 사용하여 특정 요소를 선택하는 자바스크립트 메서드입니다. 이 메서드는 문서 내에서 첫 번째로 일치하는 요소를 반환합니다.

 

사용법

 

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보겠습니다.

 

<div class="container">
	<h1>Hello World</h1>
	<p>This is a paragraph.</p>
</div>

 

이 코드에서 querySelector를 사용하여 "Hello World"라는 텍스트가 있는 h1 요소를 선택해 보겠습니다.

 

const heading = document.querySelector('h1');

 

위의 코드에서는 CSS 선택자 "h1"을 사용하여 문서 내에서 첫 번째로 일치하는 h1 요소를 선택합니다. 이 요소는 heading 변수에 할당됩니다.

 

querySelector 메서드는 다른 CSS 선택자도 사용할 수 있습니다. 예를 들어, 클래스 이름이 "container"인 요소를 선택하려면 다음과 같이 코드를 작성할 수 있습니다.

 

const container = document.querySelector('.container');

 

이 코드에서는 CSS 선택자 ".container"를 사용하여 클래스 이름이 "container"인 요소를 선택합니다. 이 요소는 container 변수에 할당됩니다.