최신 웹 개발 튜토리얼
 

HTML DOM querySelector() Method

<요소 개체

예

A의 클래스 = "예"를 첫 번째 자식 요소의 텍스트 변경 <div> 요소를 :

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

querySelector() 메소드는 지정된 CSS의 일치하는 첫 번째 자식 요소를 반환 selector(s) 요소의를.

참고 : querySelector() 메소드는 지정된 선택기 일치하는 첫 번째 요소를 반환합니다. 모든 경기를 반환 사용 querySelectorAll() 대신 방법을.

CSS 선택기에 대한 자세한 내용은, 우리의 방문 CSS 선택기 튜토리얼 과 우리의 CSS 선택기 참조 .

브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
querySelector() 4.0 8.0 3.5 3.2 10.0

통사론

element .querySelector( CSS selectors )

매개 변수 값

매개 변수 유형 기술
CSS selectors String 필요합니다. 요소를 일치시킬 하나 이상의 CSS 선택기를 지정합니다. 이들은 등 속성의 자신의 ID, 클래스, 유형, 속성 값을 기반으로 HTML 요소를 선택하는 데 사용됩니다

여러 선택기를 들어, 쉼표로 각 선택기를 구분합니다. 반환되는 요소는 먼저 문서에서 발견되는 어떤 요소에 따라 달라집니다 (See "More Examples") .

팁 : 모든 CSS 선택기의 목록은 우리를 보면 CSS 선택기 참조 .

기술적 세부 사항

DOM 버전 : 선택기 레벨 1 요소 개체
반환 값 : 지정된 CSS의 일치하는 첫 번째 요소 selector(s) . 일치하는 항목이 없으면, null가 돌려 주어집니다. 지정된 경우 SYNTAX_ERR 예외를 throw selector(s) 유효하지 않습니다.
예

더 예

예

최초의 텍스트 변경 <p> A의 요소 <div> 요소를 :

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
»그것을 자신을 시도

예

최초의 텍스트 변경 <p> A의 클래스 = "예"인 요소 <div> 요소를 :

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
»그것을 자신을 시도

예

= A에 "데모"ID로 요소의 텍스트를 변경 <div> 요소 :

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
»그것을 자신을 시도

예

처음에 빨간색 테두리를 추가 <a> , 안쪽 대상 속성이 요소 <div> 요소를 :

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
»그것을 자신을 시도

예

이 예는 선택기가 작동하는 방법을 여러 보여줍니다.

A : 당신이 두 가지 요소가 있다고 가정 <h2> 와 <h3> 요소를.

다음 코드는 처음에 배경 색상을 추가합니다 <h2> 의 요소 <div> :

<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";
»그것을 자신을 시도

그러나, 만약 <h3> 요소는 이전에 넣고 <h2> 의 엘리먼트 <div> . <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";
»그것을 자신을 시도

관련 페이지

CSS 자습서 : CSS 선택기

CSS 참조 : CSS 선택기 참조

자바 스크립트 튜토리얼 : 자바 스크립트 HTML DOM 노드 목록

자바 스크립트 참조 : 문서. querySelector()

자바 스크립트 참조 : 요소입니다. querySelectorAll()

HTML DOM 참조 : 문서. querySelectorAll()

<요소 개체