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
Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
developer.mozilla.org
반응형
'DOM > 기초' 카테고리의 다른 글
| textContent vs innerText vs innerHTML (0) | 2021.06.29 |
|---|---|
| setAttribute (0) | 2021.06.29 |
| offsetHeight, offsetWidth (0) | 2021.06.29 |
| 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? (0) | 2021.06.29 |
| DOM - 차이점 비교 (0) | 2021.06.29 |
