더북(TheBook)

4.2.1 선택자 사용하기

보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현합니다. 선택할 때는 document.querySelector()라는 특별한 메서드를 사용하는데, 형식은 다음과 같습니다.

형식

document.querySelector('선택자')

document 객체와 querySelector() 메서드는 웹 브라우저가 미리 만들어 둔 것이라서 따로 선언하지 않아도 됩니다. document 객체는 브라우저에 열려 있는 HTML 문서를 가리킵니다. 여기서 ‘선택자’라는 용어가 나오는데, 선택자(selector)는 HTML 태그를 가져오게 도와주는 문자열입니다.

4.1절에서 만든 word-relay.html 파일에서 script 태그 내부에 다음과 같이 코드를 작성합니다.

<script>
const $input = document.querySelector('input'); 
console.log($input);
</script>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.