HTML DOM 요소 querySelector() 메서드

정의와 사용법

querySelector() 메서드는 요소의 지정된 CSS 선택자와 일치하는 첫 번째 자식 요소를 반환합니다。

주의사항：

querySelector() 메서드는 지정된 선택자와 일치하는 첫 번째 요소만 반환합니다. 모든 일치하는 항목을 반환하려면, 대신 querySelectorAll() 메서드。

다른 것을 참조하십시오：

참조 매뉴얼：

classList 속성

className 속성

querySelectorAll() 메서드

getElementsByTagName() 메서드

getElementsByClassName() 메서드

HTML DOM Style 객체

教程：

CSS 문법

CSS 선택자

CSS 선택자 참조 가이드

실례

예제 1

更改 <div> 元소의 class="example" 의 첫 번째 자식 요소의 텍스트를 변경합니다：

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

직접 시도해보세요

페이지 아래에 더 많은 예제가 제공됩니다。

문법

element.querySelector(CSSselectors)

매개변수

매개변수 설명
CSSselectors

필수. 문자열. 요소를 일치시키기 위해 하나 이상의 CSS 선택자를 지정합니다。

CSS 선택자는 id, 클래스, 타입, 속성, 속성 값 등에 따라 HTML 요소를 선택하는 데 사용됩니다。

여러 선택자를 사용할 때는 각 선택자 사이에 쉼표를分隔합니다。

반환된 요소는 문서에서 먼저 찾은 요소에 따릅니다. 아래의 "更多实例"를 참조하세요。

힌트：전체 CSS 선택자 목록을 보려면, 우리의 CSS 선택자 참조 가이드。

기술 세부 사항

반환 값：

지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다。

일치하는 항목이 없으면 null을 반환합니다。

지정된 선택자가 유효하지 않으면 SYNTAX_ERR 예외를 투척합니다。
DOM 버전： Selector Level 1 Element Object

更多实例

예제 2

更改 <div> 元소의 첫 번째 <p> 요소의 텍스트를 변경합니다：

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

직접 시도해보세요

예제 3

更改 <div> 元소의 class="example" 의 첫 번째 <p> 요소의 텍스트를 변경합니다：

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

직접 시도해보세요

예제 4

更改 <div> 元소의 id="demo" 요소의 텍스트를 변경합니다：

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

직접 시도해보세요

예제 5

<div> 요소 내에 target 속성을 설정한 첫 번째 <a> 요소에 빨간 경계선을 추가합니다:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

직접 시도해보세요

예제 6

이 예제는 여러 선택자가 어떻게 작동하는지 보여줍니다.

두 개의 요소가 있습니다: <h2> 요소와 <h3> 요소.

다음 코드는 <div> 내의 첫 번째 <h2> 요소에 배경색을 추가합니다:

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

직접 시도해보세요

예제 7

그러나, <div> 내의 <h3> 요소가 <h2> 요소보다 앞에 위치하면, <h3> 요소는 빨간 배경색을 얻습니다.

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

직접 시도해보세요

브라우저 지원

표의 숫자는 이 방법을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 8.0 3.5 3.2 10.0

관련 페이지

CSS 강의:CSS 선택자

CSS 참조 설명서:CSS 선택자 참조 가이드

JavaScript 강의:JavaScript HTML DOM Node List

JavaScript 참조 설명서:document.querySelector()

JavaScript 참조 설명서:element.querySelectorAll()

HTML DOM 참조 설명서:document.querySelectorAll()