반응형
querySelector
- JS에서 HTML 요소(엘리먼트)들을 가져올 때 사용한다
- CSS 선택자들(ID, Class, HTML Tag 등등)로 찾아서 해당하는 요소(엘리먼트)를 반환해준다.
- querySelector() : CSS선택자로 해당하는 첫 번째 HTML요소를 1개 반환해준다.
- 중복된 class선택자로 querySelector를 사용할 겨우 제일 최상단에 하나만 선택하여 반환한다
- 특정 name, id, class를 제한하지 않고 css선택자를 사용하여 요소를 찾는다. 만일 같은 class 선택자라면 스크립트의 최상단 요소만 로직에 포함하여 가져 온다.
- querySelectorAll() : CSS 선택자에 해당하는 요소들 전부를 가져와서 반환해준다
- querySelector와 사용방법은 동일하며 선택자를 선택하여 배열과 비슷한 유사 배열로 반환한다. 이에 배열 메서드를 적용하려면 스프레드 작업이 필요하다.
- querySelector() : CSS선택자로 해당하는 첫 번째 HTML요소를 1개 반환해준다.
<body>
<div id="id-test"></div>
<div class="class-test">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<div id="id-test1" class="class-test"></div>
</body>console.log(document.querySelector("#id-test"));
console.log(document.querySelector(".class-test"));
console.log(document.querySelector("#id-test1.class-test"));
console.log(document.querySelector(".child"));
console.log(document.querySelectorAll(".child"));
'Javascript' 카테고리의 다른 글
| (Javascript) Class (0) | 2023.01.16 |
|---|---|
| (Javascript) Elements, Tags (0) | 2023.01.16 |
| (Javascript) DOM method (2) | 2023.01.15 |
| (Javascript) 반복문 (0) | 2023.01.13 |
| (Javascript) 조건문 (0) | 2023.01.13 |
