자바스크립트, document css selector

const sel = document.querySelector('.....'); // null or Element. 하나만 찾을 때

// document.getElementById('.....') 참조 (요즘엔 지양)

 

const sels = document.querySelectorAll('.....'); // NodeList (Not Element). 여러개 찾을 때

// document.getElementsByName('.....') 참조 (요즘엔 지양)

// document.getElementsByTagName('.....') 참조 (요즘엔 지양)

// document.getElementsByClassName('.....') 참조 (요즘엔 지양)

 

* CSS selector

# 은 id 속성의 값. 하나만 존재

. 는 class 속성의 값. 여러개 연이어 기술하면 classList 에 포함. p.good.welll 은 <p class="good well .....">.....</p>

, 는 여러 조건을 여러번 찾지 않고 한 번에 찾는 것.

~ 는 siblings(형제)

> 는 바로 아래 단계의 element

+ 는 앞 뒤로 연결된 element

a[속성명='속성값'] 는 <a 속성명="속성값" .....>.....</a>