HTML DOM Document querySelector() 메서드

정의와 사용법

querySelector() 메서드는 CSS 선택자와 일치하는첫 번째요소.

반환하려면모든일치하는 항목(첫 번째 일치 항목뿐만 아니라 모든 일치 항목)을 가져오려면 querySelectorAll()를 사용하세요.

선택자가 유효하지 않으면 querySelector() 와 querySelectorAll() 모두 SYNTAX_ERR 예외.

예시

예제 1

첫 번째 <p> 요소를 가져오세요:

document.querySelector("p");

직접 테스트해 보세요

예제 2

class="example"의 첫 번째 요소를 가져오세요:

document.querySelector(".example");

직접 테스트해 보세요

예제 3

class="example"의 첫 번째 <p> 요소를 가져오세요:

document.querySelector("p.example");

직접 테스트해 보세요

예제 4

id="demo"의 요소의 텍스트를 변경하세요:

document.querySelector("#demo").innerHTML = "Hello World!";

직접 테스트해 보세요

예제 5

부모 요소가 <div> 요소인 첫 번째 <p> 요소를 선택하세요:

document.querySelector("div > p");

직접 테스트해 보세요

예제 6

"target" 속성을 가진 첫 번째 <a> 요소를 선택하세요:

document.querySelector("a[target]");

직접 테스트해 보세요

예제 7

첫 번째 <h3> 또는 첫 번째 <h4>를 선택하세요:

<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

직접 테스트해 보세요

예제 8

첫 번째 <h3> 또는 첫 번째 <h4>를 선택하세요:

<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

직접 테스트해 보세요

문법

document.querySelector(cssSelectors)

매개변수

매개변수 설명
cssSelectors

필수. 하나 또는 여러 CSS 선택자

CSS 선택자는 id, 클래스, 타입, 속성, 속성 값 등에 따라 HTML 요소를 선택합니다.

완전한 목록을 보려면, 우리의 CSS 선택자 참조 매뉴얼.

여러 선택자를 사용할 때, 각 선택자 사이에 쉼표를分隔합니다. (위의 예제 참조)

반환 값

타입 설명
객체

CSS 선택자와 일치하는 첫 번째 요소를 포함한 NodeList

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

HTMLCollection 과 NodeList의 차이

NodeList 와 HTMLcollection 매우 유사합니다.

둘 다 문서에서 추출된 노드（요소）의 유사 배열 집합（목록）입니다. 인덱스 번호（인덱스）를 통해 노드에 액세스할 수 있습니다. 인덱스는 0에서 시작됩니다.

둘 다 length 속성은 목록（집합）에 있는 요소의 수를 반환합니다.

HTMLCollection은HTML 문서 요소의 집합.

NodeList는문서 노드（요소 노드, 속성 노드 및 텍스트 노드）의 집합.

HTMLCollection 항목은 그들의 이름, id 또는 인덱스 번호를 통해 액세스할 수 있습니다.

NodeList 항목은 그들의 인덱스 번호를 통해 액세스할 수 있습니다.

HTMLCollection은 항상실시간의 집합.

예를 들어: <li> 요소가 DOM의 목록에 추가되면 HTMLCollection의 목록도 변경됩니다.

NodeList는 일반적으로정적의 집합.

예를 들어: <li> 요소가 DOM의 목록에 추가되면 NodeList의 목록은 변경되지 않습니다.

getElementsByClassName() 와 getElementsByTagName() 모든 메서드는 실시간 HTMLCollection를 반환합니다.

querySelectorAll() 메서드는 정적 NodeList를 반환합니다.

childNodes 속성은 실시간 NodeList를 반환합니다.

브라우저 지원

document.querySelector() DOM Level 1 (1998) 기능입니다.

모든 브라우저에서 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

교육:

CSS 선택자

CSS 선택자 참조 매뉴얼

HTML DOM NodeList 참조 매뉴얼

QuerySelector 메서드:

querySelector() 메서드

querySelectorAll() 메서드

GetElement 메서드:

getElementById() 메서드

getElementsByTagName() 메서드

getElementsByClassName() 메서드