javascript querySelector, querySelectorAll이용하기

이번 포스팅에서는 javascript의 querySelector를 이용하는 방법에 대해 다뤄보겠습니다.

크롬 브라우저의 개발자 도구에서 console창으로 테스트해보시는 것을 추천드립니다.

 

📌 querySelector

querySelector는 dom 요소를 하나만 선택할 때 사용합니다.

해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용됩니다.

사용 방법은 이렇습니다.

document.querySelector('요소');

 

📌 querySelectorAll

querySelectorAll은 해당되는 모든 요소를 nodeList(배열)로 반환합니다.

document.querySelectorAll('요소');

 

이때, 선택할 요소는 css 선택자를 사용하는데요, 대표적인 경우 몇 가지를 소개하겠습니다.

 

1. 기본 태그

html은 div태그, p 태그 등 여러가지 태그들로 구성되어 있습니다. 이 태그를 선택할 때는 그대로 적어주기만 하면 됩니다.

document.querySelector('div');
document.querySelector('p');

만약 p 태그를 선택한다고 하면, p태그 중 가장 처음 선언된 p 태그만 불러오게 됩니다.

일치하는 모든 요소를 받고 싶다면 querySelectorAll을 이용합니다.

 

2. 클래스

클래스를 선택하는 방법은 클래스 이름 앞에 .(점)을 붙이는 겁니다.

클래스 이름이 someName인 경우 선택하는 예시입니다.

document.querySelector('.someName');

이 경우도 마찬가지로 class 이름이 someName인 요소들 중 첫 번째 요소 하나만 가져오게 됩니다.

두 개 이상의 요소를 받고 싶다면 querySelectorAll을 이용합니다.

 

3. Id

Id를 선택하는 방법은 Id이름 앞에 #을 붙이는 겁니다.

Id이름이 someName인 경우의 예시입니다.

document.querySelector('#someName');

 

4. 자식 요소 선택하기

someName의 자식 요소에 p태그 하나가 존재하는 경우입니다.

document.querySelecotr('.someName>p');

 

5. 자손 요소 선택하기

someName의 하위의 모든 요소들 중 일치하는 요소를 반환합니다.

document.querySelector('.someName p');

querySelector는 단일 선택자이기 때문에 첫 번째 요소만 반환합니다.

두 개 이상의 자손을 받고 싶다면 querySelectorAll을 이용합니다.