-
DOM
브라우저에서는 HTML코드를 DOM (Document Object Model : 문서객체모델)
이라는 객체형태의 모델로 저장한다.
1. CSS 선택자
- querySelector와 querySelectorAll은 모두 CSS선택자를 기반으로 원하는 요소를 찾습니다.
document.querySelector('.classname'); /* classname 이라는 클래스를 가진 요소를 찾습니다. */ document.querySelector('.classname > .classname2'); /* classname이라는 클래스를 가진 요소 바로 아래에 있는 classname2라는 클래스를 가진 요소를 찾습니다. */ document.querySelector('.classname .classname2') /* classname이라는 클래스를 가진 요소 아래에 있는 classname2라는 클래스를 가진 요소를 찾습니다. */ document.querySelector('#id'); /* id라는 아이디를 가진 요소를 찾습니다. */ document.querySelector('div'); /* div태그를 찾습니다. */
: 따라서 특정 아이디를 가진 요소만 찾을 수 있는 getElementById나
특정 클래스를 가진 요소만 찾을 수 있는 getElementsByClassName보다 활용도가 높습니다.
2. querySelector
- 쿼리셀렉터는 단일요소만 선택할 수 있습니다.
3. querySelectorAll
- querySelectorAll은 여러개 선택
#블로그참고
https://blog.naver.com/tk2rush90/222124979150
자바스크립트 querySelector, querySelectorAll
https://blog.naver.com/ses7361/222279708409
자바스크립트 querySelector, querySelectorAll
반응형'코딩스터디 > Javascript' 카테고리의 다른 글
innerText, innetHTML 차이 (0) 2021.05.19 자바스크립트 템플릿 리터럴 (0) 2021.05.19 자바스크립트 스코프(scope) (0) 2021.05.15 반복문 - for, forEach, map, for of (0) 2021.05.14 자바스크립트 조건문 (0) 2021.05.14 댓글