자바스크립트에서 HTML 요소, 즉 문서 객체(document object)를 조작하려면 다음과 같은 메소드를 사용해서 접근할 수 있다.
document.querySelector(css 선택자)
document.querySelectorAll(css 선택자)(css 선택자)가 들어가는 부분은 css 파일에서 사용하는 모든 선택자를 다 넣을 수 있다.
태그(button), #아이디(#btn), 클래스(.btn), 속성 선택자(\[class="btn"\]), 자식 선택자(.btn span)
querySelector()과 querySelectorAll() 차이점
querySelector() 메소드는 문서 객체(요소) 하나만 가져오고, querySelectorAll()은 문서 객체(요소) 여러 개를 가져올 수 있다. 그냥 갯수 차이이다. 특히 querySelectorAll()은 여러 개를 가져올 수 있으므로 배열로 읽어들이고, 이 배열을 활용하려면 forEach()와 같은 반복문을 돌려야 한다.
'JavaScript' 카테고리의 다른 글
| [자바스크립트 예제 #02] Tabs 탭메뉴 만들기 (0) | 2023.11.11 |
|---|---|
| [자바스크립트 문법] classList와 forEach() (0) | 2023.11.09 |
| [자바스크립트 예제 #01] Color Flipper 만들기 (hex-code.ver) (2) | 2023.11.09 |
| 바닐라 자바스크립트 응용 예제 모음 with 리액트, 타입스크립트 (1) | 2023.11.09 |
| Vanilla JS, 바닐라 자바스크립트의 필요성 요약 (2) | 2023.11.08 |
