[javascript] 자바스크립트 querySelector 알아보기

 

 

안녕하세요!

오늘은 자바스크립트의 기본 문법 중 하나인 querySelector에 대해 자세히 알아보려고 합니다. querySelector는 HTML 문서를 간편하게 조회하고 조작할 수 있도록 도와주는 유용한 함수입니다. 이 함수를 사용하면 웹 페이지의 요소들을 선택하여 원하는 동작을 수행할 수 있습니다. querySelector를 효과적으로 활용하면 웹 개발을 더욱 편리하고 효율적으로 할 수 있습니다.

 

---

querySelector

자바스크립트의 querySelector는 HTML 문서에서 원하는 요소를 선택하는 기능을 제공하는 함수입니다. 이 함수는 CSS 선택자를 활용하여 원하는 요소를 찾을 수 있으며, 첫 번째로 일치하는 요소를 반환합니다. querySelector를 사용하면 웹 페이지의 요소들을 동적으로 선택하고 조작할 수 있습니다.

 

예시 코드

const element = document.querySelector(selector);

인자 (selector)
CSS 선택자를 통해 원하는 요소를 지정합니다. 예를 들어, 클래스 선택자는 .classname, 아이디 선택자는 #idname과 같은 형식으로 사용합니다.

 

반환 값
선택된 첫 번째 요소(Element)를 반환합니다. 일치하는 요소가 없을 경우 null을 반환합니다.

 

---

querySelect 기본 예제 소스 코드

<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 함수를 사용하여 HTML 문서에서 선택 요소를 찾아내는 예제입니다.


1. document.querySelector('.domSelect')
querySelector 함수를 사용하여 CSS 선택자 .domSelect를 통해 원하는 요소를 선택합니다. 이 경우, 클래스 선택자 .domSelect를 사용하여 클래스가 "domSelect"인 요소를 찾습니다.

2. console.log(domSelect)
선택된 요소를 domSelect 변수에 할당하고, 해당 변수를 console.log를 통해 콘솔에 출력합니다.

 

위의 코드에서는 "DOM 01"이라는 텍스트를 감싸고 있는 <span> 요소를 선택하여 해당 요소를 출력합니다. 출력 결과는 브라우저의 개발자 도구 콘솔에서 확인할 수 있습니다.

 

 

실행 결과

 

브라우저의 개발자 도구 console 내용

 

 

---

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 함수를 사용하여 HTML 문서에서 선택 요소를 찾아내고 해당 요소의 텍스트 내용과 스타일을 변경하는 예제입니다.


1. document.querySelector('.domSelect')
querySelector 함수를 사용하여 CSS 선택자 .domSelect를 통해 원하는 요소를 선택합니다. 이 경우, 클래스 선택자 .domSelect를 사용하여 클래스가 "domSelect"인 요소를 찾습니다.

2. domSelect.textContent = 'Change DOM 01'
domSelect 변수로 선택된 요소의 텍스트 내용을 "Change DOM 01"로 변경합니다.

 

3. domSelect.style.color = 'red'
domSelect 변수로 선택된 요소의 텍스트 색상을 빨간색으로 변경합니다.

 

4. console.log(domSelect)
변경된 요소를 console.log를 통해 콘솔에 출력합니다.

 

위의 코드에서는 "DOM 01"이라는 텍스트를 감싸고 있는 <span> 요소를 선택하여 해당 요소의 텍스트 내용을 "Change DOM 01"로 변경하고, 텍스트의 색상을 빨간색으로 변경합니다. 변경된 요소는 콘솔에서 확인할 수 있습니다.

 

 

실행 결과

 

---

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>

위의 소스 코드는 자바스크립트의 querySelectorAll 함수를 사용하여 HTML 문서에서 모든 선택 요소를 찾아내고 해당 요소들을 배열로 반환하는 예제입니다.

 

1. document.querySelectorAll('.domSelect')
querySelectorAll 함수를 사용하여 CSS 선택자 .domSelect를 통해 원하는 모든 요소들을 선택합니다. 이 경우, 클래스 선택자 .domSelect를 사용하여 클래스가 "domSelect"인 모든 요소들을 배열로 반환합니다.

2. console.log(domSelect)
선택된 요소들이 배열로 반환되고, console.log를 통해 콘솔에 출력됩니다.

 

위의 코드에서는 클래스가 "domSelect"인 모든 요소들을 선택하여 배열로 반환하고, 이를 콘솔에서 확인합니다.

 

 

실행 결과

domSelect class를 가진 3개의 span Tag

 

브라우저의 개발자도구 console 내용

 

 

---

최종 정리

 

오늘은 자바스크립트에서 document 요소를 다루는 querySelector와 querySelectorAll 기능에 대해 정리해 봤습니다.

웹 개발에서 document 요소를 다루고 조작하는 것은 매우 중요한 부분이며, 동적인 처리 또한 중요한 부분이기 때문에 querySelector를 이용해서 다루는 방법을 익혀두는 것은 매우 좋습니다. 오늘은 자바스크립트에서 document 요소를 선택하고 다루는 데에 유용한 querySelector와 querySelectorAll 함수에 대해 정리해 보았습니다.

웹 개발에서는 HTML 문서의 요소들을 동적으로 조작하는 일이 매우 중요합니다. querySelector를 이용하면 CSS 선택자를 통해 원하는 요소를 선택할 수 있고, querySelectorAll을 이용하면 해당 조건에 맞는 모든 요소들을 배열로 가져올 수 있습니다. 이를 통해 동적인 처리와 다양한 작업을 할 수 있습니다.

 

감사합니다!