DOM과 queryselector, querySelectorAll

 

DOM

브라우저에서는 HTML코드를 DOM (Document Object Model : 문서객체모델)

이라는 객체형태의 모델로 저장한다.

DOM

 

 

 

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