document.querySelector 메소드

이 메소드는 () 안에 지정한 ‘선택자(selector)’를 가져옵니다.

선택자란, CSS의 선택자를 의미합니다.
즉, 자바스크립트로 요소를 가져올 때 CSS 선택자를 사용할 수 있는 것입니다.
(매우 편리한 기능)

CSS 선택자로 요소 가져오기


document.querySelector('CSS 선택자')

document.querySelector('html')

이 querySelector 메서드의 () 안의 매개변수는 ‘html’으로
HTML의 <html> ~ </html>을 가져옵니다.
이것은 CSS의 유형 선택자입니다.

document.querySelector('option[value="index.html"]')

이것은 <option> 태그 중 value 속성이 “index.html”인 것에 일치합니다.



즉, 위 HTML의 <option value=”index.html”>한국어</option>를 가져오는 것입니다.

이 option[value=”index.html”]라는 선택자는 CSS에서는 속성 선택자라고 합니다.

CSS 선택자를 사용하는 경우 여러 요소에 일치할 가능성이 있습니다.

예를 들어 위의 경우는 document.querySelector(‘option’) 으로 가져오는 경우인데, 이런 경우는 ‘처음 일치한 요소’만 가져옵니다.
따라서, <option value=”index.html”>한국어</option> 만 가져옵니다.

😉

About the author

bogn

View all posts

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다