querySelector, querySelectorAll 사용법

querySelector, querySelectorAll 사용법

👩‍💻 querySelector

querySelector()는 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾습니다.

같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함합니다.

querySelector(#id) => id 값 id를 가진 요소를 찾습니다.
querySelector(.class) => class 값 class를 가진 요소를 찾습니다.

🙋‍♀️ querySelectorAll

querySelector와 사용 방법은 동일하며 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환합니다. 반환객체가 nodeList이기에 for문 또는 forEach문을 사용합니다.

아래 코드와 같이 ","를 사용하면 여러 요소를 한번에 가져올 수 있습니다.

querySelectorAll("#id,.class");