HTML DOM querySelector () 메소드
예
첫 번째 자식 요소 텍스트 내용 수정 ID가 = "데모"는 <div> 요소의 :
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "# 데모") innerHTML을 = "안녕하세요!";
x.querySelector ( "# 데모") innerHTML을 = "안녕하세요!";
»시도
정의 및 사용
querySelector () 메서드는 일치하는 요소 지정된 CSS 선택기 첫 번째 자식 요소를 반환합니다.
참고 : querySelector () 메소드는 지정한 셀렉터에 일치하는 첫 번째 요소를 반환합니다. 당신이 일치하는 모든 요소를 반환하려면, 대신 querySelectorAll () 메서드를 사용합니다.
더 CSS 셀렉터를 들어, 당신은 우리의 방문 할 수있는 CSS 선택기는 튜토리얼 과 우리의 CSS 선택기는 설명서를 참조 .
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
| 방법 | |||||
|---|---|---|---|---|---|
| querySelector () | 4.0 | 8.0 | 3.5 | 3.1 | 10.0 |
문법
요소 .querySelector (CSS 선택기)
매개 변수 값
| 매개 변수 | 유형 | 기술 |
|---|---|---|
| CSS 선택기 | 현 | 해야합니다. CSS 선택기에서 하나 이상의 일치하는 요소를 지정합니다. 당신은 요소를 선택하는 등, 속성 값, 속성, 자신의 아이디, 클래스, 유형을 사용할 수 있습니다. 쉼표로 구분 된 여러 선택기, 내용은 일치하는 요소를 반환합니다. 팁 : 더 CSS 선택기를 들어, 우리의 참조하시기 바랍니다 CSS 선택기는 설명서를 참조 . |
기술 세부 사항
| DOM 버전 : | 선택기 레벨 1 요소 개체 |
|---|---|
| 반환 값 : | 일치하는 첫 번째 요소는 CSS 셀렉터를 지정했습니다. 발견되지 않는 경우는, null를 돌려줍니다. 지정하면 잘못된 선택 SYNTAX_ERR 예외가 발생합니다. |
더 많은 예제
예
첫 번째 <P> 요소의 내용에 <div> 요소를 수정
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "P") innerHTML을 = "안녕하세요!";
x.querySelector ( "P") innerHTML을 = "안녕하세요!";
»시도
예
수정 <DIV> 첫 번째 클래스 = "예"하위 요소의 내용의 요소 :
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "예.") innerHTML을 = "안녕하세요!";
x.querySelector ( "예.") innerHTML을 = "안녕하세요!";
»시도
예
의 <p> 요소의 첫 번째 클래스 = "예"에 <div> 요소를 수정
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "p.example") innerHTML을 = "안녕하세요!";
x.querySelector ( "p.example") innerHTML을 = "안녕하세요!";
»시도
예
은 <DIV> 요소는 첫 번째 대상 속성 <A> 요소가 같이 빨간색 테두리를 추가합니다 :
VAR X = document.getElementById를 ( "myDIV을");
. X.querySelector (의 "[대상]") = "10px 빨간색으로"style.border;
. X.querySelector (의 "[대상]") = "10px 빨간색으로"style.border;
»시도
예
다음 예는 선택기 복수의 사용을 보여준다.
당신이이 선택기를 선택한다고 가정 <H2>와 <H3> 요소입니다.
첫 번째 <H2>는 다음 코드 <div> 요소에 대한 요소는 배경 색상을 추가합니다 :
<사업부 아이디 = "myDIV">
<H2>은 H2 요소 </ H2>
<H3>은 H3 요소 </ H3>
</ DIV>
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "H2, H3")을 style.backgroundColor = "빨간색";
<H2>은 H2 요소 </ H2>
<H3>은 H3 요소 </ H3>
</ DIV>
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "H2, H3")을 style.backgroundColor = "빨간색";
»시도
그러나, 만약 <div> 요소 <H3> 요소는 <H2> 요소하기 전에, <H3> 요소는 배경 색상을 지정하기 위해 설정됩니다.
<사업부 아이디 = "myDIV">
<H3>은 H3 요소 </ H3>
<H2>은 H2 요소 </ H2>
</ DIV>
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "H2, H3")을 style.backgroundColor = "빨간색";
<H3>은 H3 요소 </ H3>
<H2>은 H2 요소 </ H2>
</ DIV>
VAR X = document.getElementById를 ( "myDIV을");
x.querySelector ( "H2, H3")을 style.backgroundColor = "빨간색";
»시도
관련 페이지
자바 스크립트 참조 설명서 : document.querySelector ()