S08L03 - DOM 선택자 - querySelectorAll

html

JavaScript에서 DOM 선택자 마스터하기: querySelector와 querySelectorAll 설명
목차

소개 ........................................... 1
DOM 선택자 이해하기 .......... 2
querySelector 메서드 .............. 4
querySelectorAll 메서드 .......... 7
실제 예제 ............................... 10
요소 반복 처리 ................ 13
모범 사례 및 일반적인 실수 ... 16
결론 ................................................... 19


소개
웹 개발 영역에서 Document Object Model(DOM)과 상호작용하는 것은 동적이고 반응적인 사용자 인터페이스를 만드는 데 기본적입니다. DOM 조작을 위한 다양한 도구 중에서 querySelector와 querySelectorAll는 유연성과 사용의 용이성으로 돋보입니다. 이 eBook은 이러한 강력한 JavaScript 메서드들을 심도 있게 다루며, 초보자와 기본 지식을 가진 개발자들을 위한 포괄적인 가이드를 제공합니다. HTML 요소를 효과적으로 선택하고 조작하는 방법, 코딩 효율성을 향상시키는 방법, 그리고 일반적인 실수를 피하기 위한 모범 사례를 구현하는 방법을 탐구할 것입니다.

DOM 선택자 이해하기
DOM 선택자는 무엇인가요?
DOM 선택자는 HTML 문서 내에서 요소를 탐색하고 조작하는 데 사용되는 메서드입니다. 개발자들이 태그 이름, 클래스, ID, 속성 등을 기반으로 특정 요소를 타겟팅할 수 있게 해줍니다. 올바른 요소를 선택함으로써 콘텐츠, 스타일, 구조를 동적으로 변경하여 반응적이고 인터랙티브한 사용자 경험을 제공할 수 있습니다.
DOM 선택자의 중요성
효율적인 DOM 선택은 다음과 같은 데 중요합니다:

동적 콘텐츠 관리: 페이지를 다시 로드하지 않고도 실시간 업데이트를 허용합니다.
사용자 상호작용 처리: 클릭, 호버, 폼 제출과 같은 사용자 행동에 응답합니다.
성능 최적화: DOM 조작을 최소화하여 불필요한 재흰과 다시 그리기를 줄입니다.

DOM 선택자 사용의 장점과 단점


장점
단점


유연성: 복잡한 선택자를 지원합니다.
성능: 집약적인 선택자는 성능을 저하시킬 수 있습니다.


사용 용이성: 요소 선택을 위한 간단한 문법.
브라우저 호환성: 오래된 브라우저는 지원이 제한적일 수 있습니다.


다재다능성: ID, 클래스, 태그 등으로 요소를 선택할 수 있습니다.
과도한 사용 가능성: 지나친 DOM 조작은 코드가 복잡해질 수 있습니다.


DOM 선택자를 언제, 어디서 사용할 것인가
DOM 선택자는 다음과 같은 경우에 사용합니다:

페이지에서 특정 요소에 접근하거나 수정해야 할 때.
모달, 탭, 슬라이더와 같은 동적 기능을 구현할 때.
폼 검증 및 사용자 입력을 처리할 때.

다음과 같은 상황에서는 DOM 선택자의 과도한 사용을 피하세요:

정적 콘텐츠는 조작이 필요하지 않을 때.
작업을 CSS만으로 최적화할 수 있을 때.


querySelector 메서드
개요
querySelector 메서드는 지정된 CSS 선택자와 일치하는 문서 내의 첫 번째 요소를 반환합니다. 특정 식별자를 알고 있거나 단일 요소를 가져오려는 경우에 요소를 선택하는 강력한 도구입니다.
구문




		
		
			
			
Java
			
			element = document.querySelector(selector);
			
				
					
				
					1
				
						element = document.querySelector(selector);
					
				
			
		



selector: 쉼표로 구분된 하나 이상의 CSS 선택자를 포함하는 문자열입니다.

querySelector 작동 방식
querySelector는 제공된 선택자와 일치하는 첫 번째 요소를 찾기 위해 DOM을 탐색합니다. 일치하는 요소가 없으면 null을 반환합니다.
사용 예제
div 안에 여러 단락이 있는 HTML 구조를 살펴보겠습니다:




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>DOM Selectors Example</title>
</head>
<body>
    <div>
        <p>The following data is inside div.</p>
    </div>
    <p>First paragraph outside div.</p>
    <p>Second paragraph outside div.</p>
    <p>Third paragraph outside div.</p>
    <script src="index.js"></script>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						<!DOCTYPE html>
<html>
<head>
    <title>DOM Selectors Example</title>
</head>
<body>
    <div>
        <p>The following data is inside div.</p>
    </div>
    <p>First paragraph outside div.</p>
    <p>Second paragraph outside div.</p>
    <p>Third paragraph outside div.</p>
    <script src="index.js"></script>
</body>
</html>
					
				
			
		


div 안의 단락을 선택하려면:




		
		
			
			
Java
			
			const paragraph = document.querySelector('div p');
console.log(paragraph.textContent);
			
				
					
				
					1
2
				
						const paragraph = document.querySelector('div p');
console.log(paragraph.textContent);
					
				
			
		


출력:




		
		
			
			
Java
			
			다음 데이터는 div 내부에 있습니다.
			
				
					
				
					1
				
						다음 데이터는 div 내부에 있습니다.
					
				
			
		


핵심 개념 및 용어

CSS 선택자: 요소를 선택하는 데 사용되는 패턴입니다(예: 'div p'는 <p>을 <div> 내부에서 선택합니다).
요소 탐색: 요소를 찾기 위해 DOM 트리를 탐색하는 과정입니다.
textContent: 요소의 텍스트 콘텐츠를 가져오는 속성입니다.

상세 설명

선택자 지정:

      'div p'는 <div>의 하위 요소인 <p> 요소를 타겟팅합니다.
메서드 실행:

      document.querySelector('div p')는 DOM에서 첫 번째 일치하는 요소를 검색합니다.
출력 기록:

      console.log(paragraph.textContent);는 선택한 단락의 내용을 콘솔에 출력합니다.

querySelector의 장점과 단점


장점
단점


단순성: 이해하고 구현하기 쉽습니다.
단일 요소: 첫 번째 일치만 반환하여 여러 요소에 대한 사용이 제한됩니다.


다재다능성: 복잡한 CSS 선택자를 지원합니다.
성능: 큰 DOM에서 광범위하게 사용하면 성능에 영향을 미칠 수 있습니다.



querySelectorAll 메서드
개요
querySelector는 첫 번째 일치하는 요소를 반환하는 반면, querySelectorAll은 지정된 CSS 선택자와 일치하는 모든 요소를 가져옵니다. 이는 모든 일치하는 요소의 정적인 NodeList를 반환하여 일괄 작업을 가능하게 합니다.
구문




		
		
			
			
Java
			
			elements = document.querySelectorAll(selector);
			
				
					
				
					1
				
						elements = document.querySelectorAll(selector);
					
				
			
		



selector: 쉼표로 구분된 하나 이상의 CSS 선택자를 포함하는 문자열입니다.

querySelectorAll 작동 방식
querySelectorAll은 전체 문서를 스캔하여 제공된 선택자와 일치하는 모든 요소를 수집하고, 이를 NodeList로 반환합니다.
사용 예제
같은 HTML 구조를 사용하여:




		
		
			
			
Java
			
			const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // Output: 4
paragraphs.forEach((para, index) => {
    console.log(`Paragraph ${index + 1}: ${para.textContent}`);
});
			
				
					
				
					1
2
3
4
5
				
						const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // Output: 4
paragraphs.forEach((para, index) => {
    console.log(`Paragraph ${index + 1}: ${para.textContent}`);
});
					
				
			
		


출력:




		
		
			
			
Java
			
			4
단락 1: 다음 데이터는 div 내부에 있습니다.
단락 2: div 외부의 첫 번째 단락입니다.
단락 3: div 외부의 두 번째 단락입니다.
단락 4: div 외부의 세 번째 단락입니다.
			
				
					
				
					1
2
3
4
5
				
						4
단락 1: 다음 데이터는 div 내부에 있습니다.
단락 2: div 외부의 첫 번째 단락입니다.
단락 3: div 외부의 두 번째 단락입니다.
단락 4: div 외부의 세 번째 단락입니다.
					
				
			
		


핵심 개념 및 용어

NodeList: 배열과 유사하지만 정확히 동일하지 않은 노드의 컬렉션입니다.
forEach 루프: NodeList의 각 요소를 반복하는 메서드입니다.

상세 설명

선택자 지정:

      'p'는 문서 내의 모든 <p> 요소를 목표로 합니다.
메서드 실행:

      document.querySelectorAll('p')는 모든 일치하는 단락을 가져옵니다.
반복 처리:

      paragraphs.forEach는 각 단락을 반복하면서 그 내용을 기록합니다.

querySelectorAll의 장점과 단점


장점
단점


여러 요소: 모든 일치하는 요소를 가져옵니다.
정적 NodeList: DOM이 변경되더라도 자동으로 업데이트되지 않습니다.


유연성: 복잡한 CSS 선택자를 지원합니다.
성능: 많은 수의 요소를 선택하면 성능에 영향을 줄 수 있습니다.



실제 예제
클래스와 ID로 요소 선택하기
다음 HTML을 고려해보겠습니다:




		
		
			
			
Java
			
			&lt;div id="container">
    &lt;p class="text">Paragraph with class 'text'.&lt;/p>
    &lt;p>Paragraph without class.&lt;/p>
    &lt;span class="text">Span with class 'text'.&lt;/span>
&lt;/div>
			
				
					
				
					1
2
3
4
5
				
						&lt;div id="container">
    &lt;p class="text">Paragraph with class 'text'.&lt;/p>
    &lt;p>Paragraph without class.&lt;/p>
    &lt;span class="text">Span with class 'text'.&lt;/span>
&lt;/div>
					
				
			
		


클래스로 선택하기




		
		
			
			
Java
			
			const textElements = document.querySelectorAll('.text');
textElements.forEach((elem) => {
    console.log(elem.textContent);
});
			
				
					
				
					1
2
3
4
				
						const textElements = document.querySelectorAll('.text');
textElements.forEach((elem) => {
    console.log(elem.textContent);
});
					
				
			
		


출력:




		
		
			
			
Java
			
			클래스 'text'가 있는 단락.
클래스 'text'가 있는 Span.
			
				
					
				
					1
2
				
						클래스 'text'가 있는 단락.
클래스 'text'가 있는 Span.
					
				
			
		


ID로 선택하기




		
		
			
			
Java
			
			const container = document.querySelector('#container');
console.log(container.textContent);
			
				
					
				
					1
2
				
						const container = document.querySelector('#container');
console.log(container.textContent);
					
				
			
		


출력:




		
		
			
			
Java
			
			클래스 'text'가 있는 단락.
클래스 'text'가 가지지 않은 단락.
클래스 'text'가 있는 Span.
			
				
					
				
					1
2
3
				
						클래스 'text'가 있는 단락.
클래스 'text'가 가지지 않은 단락.
클래스 'text'가 있는 Span.
					
				
			
		


중첩된 요소 선택하기




		
		
			
			
Java
			
			const nestedPara = document.querySelector('div #container p.text');
console.log(nestedPara.textContent);
			
				
					
				
					1
2
				
						const nestedPara = document.querySelector('div #container p.text');
console.log(nestedPara.textContent);
					
				
			
		


출력:




		
		
			
			
Java
			
			클래스 'text'를 가진 단락입니다.
			
				
					
				
					1
				
						클래스 'text'를 가진 단락입니다.
					
				
			
		


속성 선택자를 사용하여 선택하기
다음 HTML을 고려해보겠습니다:




		
		
			
			
Java
			
			&lt;button data-role="submit">Submit&lt;/button>
&lt;button data-role="cancel">Cancel&lt;/button>
			
				
					
				
					1
2
				
						&lt;button data-role="submit">Submit&lt;/button>
&lt;button data-role="cancel">Cancel&lt;/button>
					
				
			
		






		
		
			
			
Java
			
			const submitButton = document.querySelector('button[data-role="submit"]');
console.log(submitButton.textContent); // Output: Submit
			
				
					
				
					1
2
				
						const submitButton = document.querySelector('button[data-role="submit"]');
console.log(submitButton.textContent); // Output: Submit
					
				
			
		


선택자 결합하기
다음 HTML을 고려해보겠습니다:




		
		
			
			
Java
			
			&lt;ul>
    &lt;li class="active">Home&lt;/li>
    &lt;li>About&lt;/li>
    &lt;li class="active">Services&lt;/li>
&lt;/ul>
			
				
					
				
					1
2
3
4
5
				
						&lt;ul>
    &lt;li class="active">Home&lt;/li>
    &lt;li>About&lt;/li>
    &lt;li class="active">Services&lt;/li>
&lt;/ul>
					
				
			
		






		
		
			
			
Java
			
			const activeItems = document.querySelectorAll('ul li.active');
activeItems.forEach((item) => {
    console.log(item.textContent);
});
			
				
					
				
					1
2
3
4
				
						const activeItems = document.querySelectorAll('ul li.active');
activeItems.forEach((item) => {
    console.log(item.textContent);
});
					
				
			
		


출력:




		
		
			
			
Java
			
			홈
서비스
			
				
					
				
					1
2
				
						홈
서비스
					
				
			
		



요소 반복 처리
querySelectorAll의 강력한 기능 중 하나는 선택된 요소들을 반복 처리하고 각 요소에 작업을 수행할 수 있는 능력입니다. 여러 요소를 효율적으로 조작하기 위해 루프를 구현하는 방법을 알아보겠습니다.
forEach와 querySelectorAll을 사용하기
다음 HTML을 고려해보겠습니다:




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>Looping Through Elements</title>
</head>
<body>
    <p class="dynamic">Paragraph 1</p>
    <p class="dynamic">Paragraph 2</p>
    <p class="dynamic">Paragraph 3</p>
    <script src="index.js"></script>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						<!DOCTYPE html>
<html>
<head>
    <title>Looping Through Elements</title>
</head>
<body>
    <p class="dynamic">Paragraph 1</p>
    <p class="dynamic">Paragraph 2</p>
    <p class="dynamic">Paragraph 3</p>
    <script src="index.js"></script>
</body>
</html>
					
				
			
		






		
		
			
			
Java
			
			const dynamicParagraphs = document.querySelectorAll('.dynamic');

dynamicParagraphs.forEach((para, index) => {
    para.textContent = `Updated Paragraph ${index + 1}`;
    console.log(`Paragraph ${index + 1} updated.`);
});
			
				
					
				
					1
2
3
4
5
6
				
						const dynamicParagraphs = document.querySelectorAll('.dynamic');
 
dynamicParagraphs.forEach((para, index) => {
    para.textContent = `Updated Paragraph ${index + 1}`;
    console.log(`Paragraph ${index + 1} updated.`);
});
					
				
			
		


출력:




		
		
			
			
Java
			
			단락 1이 업데이트되었습니다.
단락 2가 업데이트되었습니다.
단락 3이 업데이트되었습니다.
			
				
					
				
					1
2
3
				
						단락 1이 업데이트되었습니다.
단락 2가 업데이트되었습니다.
단락 3이 업데이트되었습니다.
					
				
			
		


Updated HTML:




		
		
			
			
Java
			
			&lt;p class="dynamic"&gt;업데이트된 단락 1&lt;/p&gt;
&lt;p class="dynamic"&gt;업데이트된 단락 2&lt;/p&gt;
&lt;p class="dynamic"&gt;업데이트된 단락 3&lt;/p&gt;
			
				
					
				
					1
2
3
				
						&lt;p class="dynamic"&gt;업데이트된 단락 1&lt;/p&gt;
&lt;p class="dynamic"&gt;업데이트된 단락 2&lt;/p&gt;
&lt;p class="dynamic"&gt;업데이트된 단락 3&lt;/p&gt;
					
				
			
		


예제: 스타일을 동적으로 변경하기




		
		
			
			
Java
			
			const buttons = document.querySelectorAll('button');

buttons.forEach((button) => {
    button.style.backgroundColor = 'lightblue';
    button.addEventListener('click', () => {
        alert(`You clicked the ${button.textContent} button.`);
    });
});
			
				
					
				
					1
2
3
4
5
6
7
8
				
						const buttons = document.querySelectorAll('button');
 
buttons.forEach((button) => {
    button.style.backgroundColor = 'lightblue';
    button.addEventListener('click', () => {
        alert(`You clicked the ${button.textContent} button.`);
    });
});
					
				
			
		


설명:

선택: 모든 <button> 요소가 선택됩니다.
스타일 수정: 각 버튼의 배경색이 연한 파란색으로 설정됩니다.
이벤트 처리: 클릭 시 알림을 표시하도록 이벤트 리스너가 추가됩니다.

인덱스 접근을 통한 반복 처리
요소에 인덱스를 통해 접근하면 타겟팅된 수정이 가능합니다.




		
		
			
			
Java
			
			const paragraphs = document.querySelectorAll('p');

if (paragraphs.length > 2) {
    paragraphs[2].textContent = 'This is the third paragraph.';
    console.log('Third paragraph updated.');
}
			
				
					
				
					1
2
3
4
5
6
				
						const paragraphs = document.querySelectorAll('p');
 
if (paragraphs.length > 2) {
    paragraphs[2].textContent = 'This is the third paragraph.';
    console.log('Third paragraph updated.');
}
					
				
			
		


출력:




		
		
			
			
Java
			
			세 번째 단락이 업데이트되었습니다.
			
				
					
				
					1
				
						세 번째 단락이 업데이트되었습니다.
					
				
			
		


Updated HTML:




		
		
			
			
Java
			
			&lt;p&gt;첫 번째 단락.&lt;/p&gt;
&lt;p&gt;두 번째 단락.&lt;/p&gt;
&lt;p&gt;세 번째 단락입니다.&lt;/p&gt;
			
				
					
				
					1
2
3
				
						&lt;p&gt;첫 번째 단락.&lt;/p&gt;
&lt;p&gt;두 번째 단락.&lt;/p&gt;
&lt;p&gt;세 번째 단락입니다.&lt;/p&gt;
					
				
			
		


조건문과 함께 루프 결합하기




		
		
			
			
Java
			
			const items = document.querySelectorAll('.item');

items.forEach((item) => {
    if (item.textContent.includes('Active')) {
        item.style.fontWeight = 'bold';
    } else {
        item.style.color = 'gray';
    }
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const items = document.querySelectorAll('.item');
 
items.forEach((item) => {
    if (item.textContent.includes('Active')) {
        item.style.fontWeight = 'bold';
    } else {
        item.style.color = 'gray';
    }
});
					
				
			
		


설명:

선택: 클래스 .item을 가진 모든 요소가 선택됩니다.
조건 확인: 요소의 텍스트에 'Active'가 포함되어 있으면 글꼴 두께를 굵게 설정하고, 그렇지 않으면 텍스트 색상을 회색으로 설정합니다.


모범 사례 및 일반적인 실수
모범 사례

선택자 최적화:

      DOM 탐색 시간을 줄이기 위해 구체적인 선택자를 사용하세요.

      성능을 저하시킬 수 있는 지나치게 복잡한 선택자는 피하세요.
선택자 캐싱:

      자주 접근하는 요소에 대한 참조를 저장하여 반복적인 DOM 쿼리를 방지하세요.

      



		
		
			
			
Java
			
			const header = document.querySelector('#header');
      // 'header' 변수는 추가 조작에 사용됩니다.
      
			
				
					
				
					1
2
3
				
						const header = document.querySelector('#header');
      // 'header' 변수는 추가 조작에 사용됩니다.
      
					
				
			
		


  
DOM 조작 제한:

      DOM 변경을 배치하여 재흰 및 다시 그리기를 최소화하세요.

      여러 요소를 한 번에 삽입하기 위해 Document Fragments를 사용하세요.
설명적인 선택자 사용:

      요소의 목적을 명확하게 설명하는 클래스 및 ID 이름을 선택하세요.

      이는 코드의 가독성과 유지 관리를 향상시킵니다.
우아한 저하:

      요소가 존재하지 않을 수 있는 경우를 처리하도록 코드를 작성하세요.

      



		
		
			
			
Java
			
			const footer = document.querySelector('#footer');
if (footer) {
    footer.textContent = 'Footer Content';
}
			
				
					
				
					1
2
3
4
				
						const footer = document.querySelector('#footer');
if (footer) {
    footer.textContent = 'Footer Content';
}
					
				
			
		


  

일반적인 실수

존재하지 않는 요소 선택:

      존재하지 않는 요소를 조작하려고 시도하면 JavaScript 오류가 발생할 수 있습니다.

      



		
		
			
			
Java
			
			const nonExistent = document.querySelector('.non-existent');
nonExistent.textContent = 'Hello'; // 오류 발생
			
				
					
				
					1
2
				
						const nonExistent = document.querySelector('.non-existent');
nonExistent.textContent = 'Hello'; // 오류 발생
					
				
			
		


  
querySelectorAll이 배열을 반환한다고 가정하기:

      NodeList는 querySelectorAll이 반환하는 것이 진정한 배열이 아닙니다. 필요에 따라 forEach와 같은 메서드를 사용하거나 배열로 변환하세요.

      



		
		
			
			
Java
			
			const elements = document.querySelectorAll('div');
const elementsArray = Array.from(elements);
			
				
					
				
					1
2
				
						const elements = document.querySelectorAll('div');
const elementsArray = Array.from(elements);
					
				
			
		


  
브라우저 호환성 무시하기:

      오래된 브라우저는 querySelector와 querySelectorAll을 완전히 지원하지 않을 수 있습니다. 항상 다양한 환경에서 테스트하거나 대체 방법을 제공하세요.
DOM 선택자 과다 사용:

      지나친 DOM 쿼리는 성능을 저하시킬 수 있습니다. 효율적인 선택자와 캐싱 전략을 사용하여 이를 완화하세요.
잘못된 선택자 문법:

      선택자 문법의 실수는 예상치 못한 결과나 일치하지 않는 결과를 초래할 수 있습니다.

      



		
		
			
			
Java
			
			// 잘못된 예
document.querySelector('div .class'); // 공백은 하위 요소를 의미함
// 올바른 예
document.querySelector('div.class'); // 'class'를 가진 div를 타깃팅함
			
				
					
				
					1
2
3
4
				
						// 잘못된 예
document.querySelector('div .class'); // 공백은 하위 요소를 의미함
// 올바른 예
document.querySelector('div.class'); // 'class'를 가진 div를 타깃팅함
					
				
			
		


  


결론
querySelector와 querySelectorAll과 같은 DOM 선택자를 마스터하는 것은 동적이고 인터랙티브한 웹 애플리케이션을 만들고자 하는 모든 웹 개발자에게 필수적입니다. 이러한 메서드는 HTML 요소에 접근하고 조작하는 견고하고 유연한 방법을 제공하여 실시간 콘텐츠 업데이트와 반응형 사용자 인터페이스를 가능하게 합니다. 그들의 기능을 이해하고, 모범 사례를 구현하며, 일반적인 실수를 피함으로써 개발 효율성을 향상시키고 더 높은 성능의 웹 애플리케이션을 구축할 수 있습니다.
SEO 키워드: DOM 선택자, JavaScript querySelector, querySelectorAll, DOM 조작, JavaScript 튜토리얼, 웹 개발, HTML 요소 선택, document.querySelector, DOM 탐색, JavaScript 초보자용, 동적 웹 페이지, 인터랙티브 UI, 프론트엔드 개발, 코딩 모범 사례, JavaScript 메서드, 웹 프로그래밍.

참고: 이 기사는 AI에 의해 생성되었습니다.
장점	단점
유연성: 복잡한 선택자를 지원합니다.	성능: 집약적인 선택자는 성능을 저하시킬 수 있습니다.
사용 용이성: 요소 선택을 위한 간단한 문법.	브라우저 호환성: 오래된 브라우저는 지원이 제한적일 수 있습니다.
다재다능성: ID, 클래스, 태그 등으로 요소를 선택할 수 있습니다.	과도한 사용 가능성: 지나친 DOM 조작은 코드가 복잡해질 수 있습니다.
장점	단점
단순성: 이해하고 구현하기 쉽습니다.	단일 요소: 첫 번째 일치만 반환하여 여러 요소에 대한 사용이 제한됩니다.
다재다능성: 복잡한 CSS 선택자를 지원합니다.	성능: 큰 DOM에서 광범위하게 사용하면 성능에 영향을 미칠 수 있습니다.
장점	단점
여러 요소: 모든 일치하는 요소를 가져옵니다.	정적 NodeList: DOM이 변경되더라도 자동으로 업데이트되지 않습니다.
유연성: 복잡한 CSS 선택자를 지원합니다.	성능: 많은 수의 요소를 선택하면 성능에 영향을 줄 수 있습니다.