HTML DOM querySelector() 메서드
❮ 요소 개체예시
<div> 요소에서 class="example"인 첫 번째 자식 요소의 텍스트를 변경합니다.
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
querySelector() 메서드는 요소의 지정된 CSS 선택기 와 일치하는 첫 번째 자식 요소를 반환합니다 .
참고: querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 일치 항목을 반환하려면 대신 querySelectorAll() 메서드를 사용하십시오.
CSS 선택기에 대한 자세한 내용은 CSS 선택기 자습서 및 CSS 선택기 참조 를 참조 하십시오.
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Method | |||||
---|---|---|---|---|---|
querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
통사론
element.querySelector(CSS selectors)
매개변수 값
Parameter | Type | Description |
---|---|---|
CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
기술적 세부 사항
DOM 버전: | 선택기 레벨 1 요소 개체 |
---|---|
반환 값: | 지정된 CSS 선택기와 일치하는 첫 번째 요소입니다. 일치하는 항목이 없으면 null이 반환됩니다. 지정된 선택기가 유효하지 않으면 SYNTAX_ERR 예외를 던집니다. |
더 많은 예
예시
<div> 요소에서 첫 번째 <p> 요소의 텍스트를 변경합니다.
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
예시
<div> 요소에서 첫 번째 <p> 요소의 텍스트를 class="example"로 변경합니다.
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
예시
<div> 요소에서 id="demo"인 요소의 텍스트를 변경합니다.
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
예시
<div> 요소 안에 target 속성이 있는 첫 번째 <a> 요소에 빨간색 테두리를 추가합니다.
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
예시
이 예는 다중 선택기가 작동하는 방식을 보여줍니다.
<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";
그러나 <h3> 요소가 <div>의 <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";
관련 페이지
CSS 튜토리얼: CSS 선택기
CSS 참조: CSS 선택기 참조
JavaScript 튜토리얼: JavaScript HTML DOM 노드 목록
JavaScript 참조: document.querySelector()
JavaScript 참조: 요소 .querySelectorAll()
HTML DOM 참조: document.querySelectorAll()
❮ 요소 개체