JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드
.querySelector()
.querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다.
문법
document.querySelector( 'selector' )
예를 들어
document.querySelector( '.xyz' )
는 클래스 값이 xyz인 첫번째 요소에 접근합니다.
예제 1
클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <p class="abc">Lorem Ipsum Dolor</p> <p class="abc">Lorem Ipsum Dolor</p> <p class="abc">Lorem Ipsum Dolor</p> <script> document.querySelector( '.abc' ).style.color = 'red'; </script> </body> </html>
예제 2
div의 하위 요소 중 클래스 값으로 abc를 갖는 첫 번째 요소를 빨간색으로 만듭니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <p class="abc">Lorem Ipsum Dolor</p> <div> <p class="abc">Lorem Ipsum Dolor</p> <p class="abc">Lorem Ipsum Dolor</p> </div> <script> document.querySelector( 'div .abc' ).style.color = 'red'; </script> </body> </html>