더 "Try it Yourself" 아래의 예.
정의 및 사용
querySelector() 메소드는 지정된 CSS의 일치하는 첫 번째 요소를 반환 selector(s) 문서를.
참고 : querySelector() 메소드는 지정된 선택기 일치하는 첫 번째 요소를 반환합니다. 모든 경기를 반환 사용 querySelectorAll() 대신 방법을.
선택기는 여러 번 사용하는 문서에 ID와 일치하는 경우 (AN합니다 "id" 이 일치하는 첫 번째 요소를 반환 한 페이지 내에서 고유해야하며 한 번 이상 사용해서는 안됩니다).
CSS 선택기에 대한 자세한 내용은, 우리의 방문 CSS 선택기 튜토리얼 과 우리의 CSS 선택기 참조 .
브라우저 지원
테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.
| 방법 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
통사론
document.querySelector( CSS selectors )매개 변수 값
| 매개 변수 | 유형 | 기술 |
|---|---|---|
| CSS selectors | String | 필요합니다. 요소를 일치시킬 하나 이상의 CSS 선택기를 지정합니다. 이들은 등 속성의 자신의 ID, 클래스, 유형, 속성 값을 기반으로 HTML 요소를 선택하는 데 사용됩니다 여러 선택기를 들어, 쉼표로 각 선택기를 구분합니다. 반환되는 요소는 먼저 문서에서 발견되는 어떤 요소에 따라 달라집니다 (See "More Examples") . 팁 : 모든 CSS 선택기의 목록은 우리를 보면 CSS 선택기 참조 . |
기술적 세부 사항
| DOM 버전 : | 선택기 레벨 1 문서 객체 |
|---|---|
| 반환 값 : | 지정된 CSS 일치 첫번째 요소 NodeList를 나타내는 오브젝트 selector(s) . 일치하는 항목이 없으면, null가 돌려 주어집니다. 지정된 경우 SYNTAX_ERR 예외를 throw selector(s) 유효하지 않습니다. |
더 예
예
"데모"= ID로 요소의 텍스트를 변경합니다 :
document.querySelector("#demo").innerHTML = "Hello World!";
»그것을 자신을 시도 예
이 예는 선택기가 작동하는 방법을 여러 보여줍니다.
A : 당신이 두 가지 요소가 있다고 가정 <h2> 와 <h3> 요소를.
다음 코드는 처음에 배경 색상을 추가합니다 <h2> 문서의 요소 :
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; »그것을 자신을 시도 그러나, 만약 <h3> 요소는 이전에 넣고 <h2> 문서 소자. <h3> 요소는 빨간색 배경 색상을 얻을 것입니다.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 선택기
CSS 참조 : CSS 선택기 참조
자바 스크립트 튜토리얼 : 자바 스크립트 HTML DOM 노드 목록
자바 스크립트 참조 : 요소입니다. querySelector()
HTML DOM 참조 : 문서. querySelectorAll()
자바 스크립트 참조 : 요소입니다. querySelectorAll()