자바스크립트 querySelector와 querySelectorAll 개념과 활용

오늘은 자바스크립트의 내장 함수인 querySelector에 대해서 정리해 보려고 한다. querySelector 함수는 document 요소를 간단하게 조회 및 조작할 수 있는 기능이다.
자바스크립트 기반의 개발을 하게 된다면 자주 사용하는 함수이지만 습관처럼 사용하는 것보다 기능을 조금 더 깊이 있게 배우고 익혀두는 것이 좋다.

---

querySelector

자바스크립트의 querySelector 함수는 객체 DOM을 통해 HTML 내에서 요소를 선택하는 데 사용되는 기능이다. 이 함수는 css 선택자를 사용하여 요소를 선택하고 반환한다.

1. 요소 선택
querySelector를 사용하여 HTML 내에서 원하는 요소를 선택할 수 있으며, 선택자를 사용하여 단일 요소를 선택하며, 해당 요소가 여러 개 존재할 경우 첫 번째 요소만 반환된다.

2. css 선택자 지원
querySelector는 css 선택자를 지원한다. css와 유사한 형식으로 선택자를 작성하여 요소를 선택할 수 있.

3. 다양한 선택자
css 선택자를 사용하여 요소를 선택할 때 다양한 선택자를 활용할 수 있다. class, id, tag name 등 다양한 속성을 사용하여 요소를 선택할 수 있다. 

4. 문서 전체 검색
querySelector를 사용하면 문서 전체에서 요소를 검색할 수 있다.

5. 단일 요소 반환
querySelector는 선택된 요소 중 첫 번째 요소만 반환하며, 여러 요소를 선택하려면 querySelectorAll 함수를 사용해야 한다.


이렇게 querySelector 함수를 사용하려면 어떤 요소를 선택할 수 있는지 확인해 보는 것이 좋다.


예제

document.querySelector('요소 선택')

 

 

위의 코드는 querySelector 함수를 사용하여 요소를 선택하는 기본 구문이다.
'요소 선택' 위치에 원하는 DOM 객체의 class, id, tag name 등 입력하여 조회하면 된다.

---

querySelector 기본 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const domSelect = document.querySelector('.domSelect');
    console.log(domSelect);

});

</script>
<div>querySelector</div>
<hr>
<div>
    <span>선택 요소 1. </span>
    <span class="domSelect">DOM 01</span>
</div>

위의 예제 소스 코드는 querySelector 함수를 사용해서 DOM 요소 중 class="domSelect"를 조회해 오는 코드다.

querySelector
querySelector('.domSelector')를 사용하여 클래스가 "domSelector"인 요소를 선택하고, 선택된 요소를 domSelect 변수에 할당한다.


소스 코드 실행 결과

브라우저의 개발자 도구를 이용해 확인한 console 내용이다. querySelector를 사용하여 요소를 간단하게 가져와 console에 정상적으로 호출된 것 같다.

다음은 querySelector를 사용하여 style을 간단하게 다뤄보는 소스 코드다.

---

querySelector style 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const domSelect = document.querySelector('.domSelect');
    domSelect.textContent = 'Change DOM 01';
    domSelect.style.color = 'red';
    console.log(domSelect);

});

</script>
<div>querySelector</div>
<hr>
<div>
    <span>선택 요소 1. </span>
    <span class="domSelect">DOM 01</span>
</div>

위의 코드는 querySelector 함수를 사용하여 요소를 선택한 후 style을 간단하게 변경해 주는 예제 코드다.

querySelector 함수를 사용하여 요소 선택
document.querySelector('.domSelect')를 사용하여 클래스가 "domSelect"인 첫 번째 요소를 선택하여 domSelect 변수에 할당한다.

선택된 요소의 텍스트 내용 변경
domSelect.textContext = 'Change DOM 01' 코드와 같이 선택된 요소의 텍스트 내용을 'Change DOM 01"로 변경한다.

선택된 요소의 스타일 변경
domSelect.style.color = 'red' 코드와 같이 선택된 요소의 텍스트 색상을 빨간색으로 변경한다.

 

domSelect.textContent = 'Change DOM 01';
domSelect.style.color = 'red';

소스 코드 실행 결과

실행 결과 선택 요소의 텍스트와 요소의 색상이 변경된 것을 확인할 수 있다. 그 밖에도 querySelector 함수를 사용하면 더 많은 속성들을 이용해 DOM 객체를 다룰 수 있다.

querySelector의 기능은 강력하지만 큰 단점이 있다. 바로 단일 선택만 가능하다는 것이다. 예를 들어, 동일한 class를 가진 요소들은 한 번에 가져올 수 없다는 것이다.
그래서 동일한 class의 객체를 한번에 리스트 형태로 가져와야 하는데, 이러한 경우에는 querySelectAll 함수를 사용하면 손쉽게 다룰 수 있다.

---

querySelectorAll 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const domSelect = document.querySelectorAll('.domSelect');
    console.log(domSelect);

});

</script>
<div>querySelector</div>
<hr>
<div>
    <span>선택 요소 1. </span>
    <span class="domSelect">DOM 01</span>
</div>
<div>
    <span>선택 요소 2. </span>
    <span class="domSelect">DOM 02</span>
</div>
<div>
    <span>선택 요소 3. </span>
    <span class="domSelect">DOM 03</span>
</div>

처음 실행했던 소스에서 querySelector 부분을 querySelectorAll 함수로 변경을 하고 dom 요소를 동일한 class를 주고 추가를 해주었다.

querySelectorAll 함수를 사용하여 요소 선택
document.querySelectorAll('.domSelect') 코드를 통해서 클래스가 "domSelect"인 모든 요소를 선택하고, 선택된 요소들은 NodeList 형태로 반환 후 domSelect 변수에 할당된다.


실행 결과

domSelect class를 가진 3개의 span Tag

console 내용

console의 결과와 같이 domSelect class를 가진 3개의 dom객체가 리스트 형태로 출력이 됐다.
선택된 요소들 중에서 특정 요소를 선택하고 싶다면 domSelect[1]과 같이 원하는 요소를 선택할 수 있다.


그러면 querySelectorAll 함수도 querySelector 함수와 동일하게 text와 style을 한 번에 변경하는 예제를 다뤄보도록 하자.

 

---

querySelectorAll style 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // 선택 요소
    const domSelect = document.querySelectorAll('.domSelect');
    const domLength = domSelect.length;
    
    for (let i = 0; i < domLength; i++) {
        domSelect[i].textContent = `Change Dom 0${i + 1}`;
        domSelect[i].style.color = 'green';
    }
});

</script>
<div>querySelector</div>
<hr>
<div>
    <span>선택 요소 1. </span>
    <span class="domSelect">DOM 01</span>
</div>
<div>
    <span>선택 요소 2. </span>
    <span class="domSelect">DOM 02</span>
</div>
<div>
    <span>선택 요소 3. </span>
    <span class="domSelect">DOM 03</span>
</div>

위의 소스 코드 querySelectAll 함수를 이용해서 선택된 모든 요소의 텍스트 내용과 스타일을 변경하는 예제다.

반복문을 사용하여 각 요소의 텍스트 내용과 스타일 변경
- for문을 사용하여 선택된 NodeList에 포함된 모든 요소를 순회하면서 textContent, style을 변경
- 각 요소의 텍스트 내용을 변경하기 위해 domSelect[i].textContent를 사용하여 요소의 텍스트를 `Change Dom 0${i + 1}`로 설정한다.
- 각 요소의 텍스트 색상을 변경하기 위해 domSelect[i].style.color를 사용하여 요소의 텍스트 색상을 green으로 설정한다.


이렇게 querySelectorAll 함수를 사용하여 클래스가 "domSelect"인 모든 요소의 텍스트 내용을 변경하고, 해당 요소들의 텍스트 색상을 green으로 설정하는 기능을 구현해 보았다.

실행 결과

선택된 요소들의 스타일이 모두 변경이 잘 된 것을 확인할 수 있다.

 

---

querySelector, querySelectorAll 사용 시 주의사항

querySelector와 querySelectorAll 함수는 DOM 요소를 선택할 때 매우 유용한 함수다. 그러나 함수를 사용할 때에는 몇 가지 주의할 사항이 있다.

1. 성능
querySelector와 querySelectorAll은 DOM을 순회하면서 일치하는 요소를 찾는다. 큰 DOM 구조에서 사용할 경우 성능에 영향을 미칠 수 있기 때문에 가능한 한 구체적인 선택자를 사용하여 성능을 향상하는 것이 중요하다.

2. NodeList 반환 형태
querySelectorAll은 일치하는 모든 요소를 포함하여 NodeList를 반환한다. NodeList는 배열과 유사하지만 배열이 아니며, NodeList에 대해 배열 메서드를 직접 사용할 수는 없으며, 필요한 경우는 배열로 변환해야 한다.

3. 요소 유효성 검사
querySelector나 querySelectorAll을 이용하여 선택된 요소가 존재하는지 먼저 확인하는 것이 좋다. 선택된 요소가 존재하지 않을 경우에 대한 예외 처리를 하는 것이 좋다.

4. 브라우저 호환성
querySelector와 querySelectorAll은 대부분 브라우저에서 지원되지만, IE8 이하 버전에서는 해당 함수 기능은 지원되지 않으므로 이를 고려하여 개발하는 것이 중요하다.

5. 동적 추가 요소 처리
querySelector와 querySelectorAll은 초기 DOM 구조를 기준으로 요소를 선택하며, 동적으로 추가된 요소에 대한 선택은 고려해야 한다. 동적으로 추가된 요소에 대해서는 선택 후에 새로운 요소에 대한 선택을 수행해야 한다.

6. 메서드 체이닝
querySelector와 querySelectorAll 함수는 메서드 체이닝을 통해서 연속적으로 요소를 선택할 수 있다. 하지만 이는 복잡한 선택자의 경우 가독성을 해칠 수 있으므로 적절한 선택자를 사용하는 것이 중요하다.


정리한 내용과 같이 querySelector와 querySelectorAll은 강력한 DOM 선택 메서드로, 주의사항을 숙지하고 올바르게 사용하면 코드의 가독성을 높이고 유지보수를 보다 손쉽게 할 수 있다.

---

마무리

오늘은 querySelector와 querySelectorAll 함수를 사용하는 방법을 정리해 보았다. 두 함수는 유사하지만 선택하는 요소가 다르다는 차이점이 있고, 요소를 선택하고 요소를 변경할 수 있다는 공통점을 가지고 있다. 
자바스크립트는 화면 개발에서 매우 강력한 언어이며, 내장되어 있는 주요 기능들을 깊이 있게 숙지한다면 기능을 구현할 때 많은 도움이 된다.