querySelector

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

 

MDN에서 querySelector를 검색하여, 다음의 질문에 대해 학습합니다.

• querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까요? 
  • 제일 처음으로 검색되는 div를 반환하거나, div가 없다면 null을 반환합니다.
• querySelector를 통해서 더 복잡한 작업을 할 수 있을까요?
  • 좀 더 복잡한 선택자
  • 아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 <div>(<div class="user-panel main">) 안의, 이름이 "login"인 <input> 중 첫 번째 요소입니다.
  • var el = document.querySelector("div.user-panel.main input[name=login]");
• querySelector의 부모는 꼭 document 객체여야만 할까요?
  • document.querySelector()
  • Element.querySelector() : The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors. -- 엘리먼트의 하위 엘리먼트를 조회하는 API

Element - Web APIs | MDN