NodeSelector 인터페이스 (The NodeSelector interface)
이 명세는 Document, DocumentFragment, 또는 Element 인터페이스를 구현하는 모든 객체에 두 가지 새로운 메서드를 추가해요.
querySelector()
해당 노드의 하위 트리 안에서 조건과 일치하는 첫 번째Element노드를 반환해요. 일치하는 노드를 찾지 못하면null을 반환한답니다.querySelectorAll()
해당 노드의 하위 트리 안에서 조건과 일치하는 모든Element노드들을 담은NodeList를](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)를) 반환해요. 일치하는 게 하나도 없다면 빈NodeList를 반환하죠.
참고:
querySelectorAll()이](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)이) 반환하는NodeList는](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)는) 라이브(live) 상태가 아니에요. 즉, DOM에 변화가 생겨도 그 변경 사항이 이 컬렉션에 실시간으로 반영되지 않는다는 뜻이죠. 실시간으로 업데이트되는(live) 노드 목록을 반환하는 다른 DOM 탐색 메서드들과는 다르니 주의해 주세요.
더 자세한 내용과 예제는 Element.querySelector()와](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)와) Element.querySelectorAll() 메서드의 공식 문서를 읽어보시면 확인할 수 있어요.
선택자 (Selectors)
선택자(selector) 메서드들은 어떤 요소나 요소들을 반환할지 결정하기 위해 선택자(selectors)를 인자로 받아요. 단일 쿼리에 여러 선택자를 하나로 묶어서 쓸 수 있도록 선택자 목록(selector lists)도 지원한답니다.
사용자의 개인정보를 보호하기 위해, 일부 의사 클래스(pseudo-classes)는 지원되지 않거나 다르게 동작해요. 예를 들어 :visited는](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:visited)는) 아무것도 반환하지 않고, :link는](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:link)는) :any-link로](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:any-link)로) 취급된답니다.
오직 요소(element)만 선택할 수 있기 때문에, 의사 클래스(pseudo-classes)는 지원되지 않아요.
예제 (Examples)
문서 안에서 클래스에 warning이나 note가 포함된 모든 단락(p) 요소들을 선택하고 싶다면, 다음과 같이 작성하시면 돼요.
const special = document.querySelectorAll("p.warning, p.note");ID를 사용해서 탐색할 수도 있어요. 예를 들면 이렇게요.
const el = document.querySelector("#main, #basic, #exclamation");위 코드를 실행하고 나면, el에는 문서 내에서 ID가 main, basic, 또는 exclamation 중 하나인 첫 번째 요소가 담기게 된답니다.
참고 자료 (See also)
