HTML DOM 문서 querySelector()
예
첫 번째 <p> 요소를 가져옵니다.
document.querySelector("p");
class="example"인 첫 번째 요소를 가져옵니다.
document.querySelector(".example");
아래에 더 많은 예가 있습니다.
정의 및 사용
이 querySelector()메서드는 CSS 선택기와 일치하는 첫 번째 요소를 반환합니다.
모든 일치 항목(첫 번째 항목뿐만 아니라) 을 반환하려면 querySelectorAll()대신 사용하십시오.
둘 다 NodeListquerySelector() 를 querySelectorAll()반환합니다 .
선택기가 유효하지 않으면 둘 다 SYNTAX_ERR 예외 querySelector()를 throw합니다.querySelectorAll()
튜토리얼:
QuerySelector 메서드:
GetElement 메서드:
HTML DOM NodeList / HTMLCollection
HTMLCollection과 NodeList의 차이점
NodeList 와 HTMLCollection 은 모두 문서에서 추출한 노드(요소)의 배열과 유사한 컬렉션(목록)입니다 . 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
두 개체 모두 목록의 요소 수를 반환 하는 길이 속성을 가지고 있습니다.
HTMLCollection은 라이브 컬렉션입니다 . DOM의 목록에 <li> 요소를 추가하면 HTMLCollection의 목록도 변경됩니다.
NodeList는 정적 컬렉션입니다 . DOM의 목록에 <li> 요소를 추가해도 NodeList의 목록은 변경되지 않습니다.
getElementsByClassName()및 메서드 는 getElementsByTagName()
HTMLCollection을 반환합니다.
querySelector()및 메서드 는 querySelectorAll()
NodeList를 반환합니다.
통사론
document.querySelector(CSS selectors)
매개변수
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
반환 값
| 유형 | 설명 |
| 물체 | CSS 선택기와 일치하는 첫 번째 요소가 있는 NodeList . 일치하는 항목이 없으면 null반환됩니다. |
더 많은 예
class="example"을 사용하여 첫 번째 <p> 요소를 가져옵니다.
document.querySelector("p.example");
id="demo"로 요소의 텍스트를 변경합니다.
document.querySelector("#demo").innerHTML = "Hello World!";
부모가 <div> 요소인 첫 번째 <p> 요소를 선택합니다.
document.querySelector("div > p");
"target" 속성이 있는 첫 번째 <a> 요소를 선택합니다.
document.querySelector("a[target]");
첫 번째 <h3> 또는 첫 번째 <h4> 선택:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
첫 번째 <h3> 또는 첫 번째 <h4> 선택:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
브라우저 지원
document.querySelector()DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |