[javascript] 자바스크립트 querySelector vs getElementById

참고: https://careerkarma.com/blog/javascript-queryselector-vs-getelementbyid/

querySelector나 getElementById 메소드를 사용하면 둘 다 JavaScript Document Object Model (DOM)에서 요소를 검색할 수 있습니다. 그렇지만 각각의 메소드에는 고유한 사용 방법이 따로 있습니다.

이 포스트에서는 querySelector 및 getElementById의 일반적인 사용 사례를 알아보겠습니다. 또한 이 두가지 방법을 비교하고 각각의 작동 방식에 대한 예시를 알아보겠습니다.

querySelector 란?

JavaScript querySelector() 메소드를 사용하면 CSS 선택자를 사용하여 DOM 또는 웹 페이지의 요소를 검색할 수 있습니다. 이 메소드는 DOM의 특정 선택자에 해당하는 모든 요소를 선택하는 querySelectorAll() 이라는 자매 함수와 함께 제공됩니다.

이 둘의 사용 방법은 매우 다양합니다. 왜냐하면 CSS 선택자 구문을 사용하여 웹 페이지의 모든 요소를 찾을 수 있기 때문입니다.

querySelector를 사용하면 getElementById 또는 getElementsByClassName을 사용하는 것 처럼 클래스 또는 ID 별로 요소를 선택하도록 제한할 수 있습니다.

이러한 방법은 찾고 싶은 요소가 CSS 스타일시트에서 선택한 요소와 유사한 경우에 특히 유용합니다.

querySelector 메소드를 살펴보겠습니다. JavaScript로 선택할 HTML 요소를 먼저 만들어 보겠습니다.

<p class="accessibility">Skip to main content</p>

먼저 accessibility 라는 클래스 이름을 가진 텍스트 단락(p, paragraph)을 정의 했습니다. 다음으로 querySelector() 메소드를 사용하여 이 단락을 선택해 보겠습니다.

const accessibility_elements = document.querySelector(".accessibility");

이 코드는 클래스가 "accessibility"인 요소 중 첫 번째 요소를 선택합니다. "."은 클래스를 선택하고 싶다는 것을 나타냅니다. "accessibility" 클래스를 가진 요소가 두 개일 경우 querySelectorAll() 메소드를 사용하여 둘 다 검색할 수 있습니다.

getElementById 란?

getElementById() 메소드는 요소의 ID 속성, 즉 ID 명을 기반으로 요소를 검색합니다.

이 메소드는 특정 ID를 기반으로만 요소를 검색할 수 있기 때문에 querySelector 보다 더 제한적입니다.

웹 페이지에서 하나의 요소만 검색하려는 경우 이 방법을 사용할 수 있습니다. 왜냐하면 HTML ID는 특정 요소에 대해 고유해야 하기 때문입니다. 웹 페이지에서 두 요소를 참조하기 위해 ID를 사용할 수는 없습니다.

getElementById 메소드를 사용하여 요소를 검색해 보겠습니다. 먼저 요소를 선택할 HTML 코드를 작성해 보겠습니다.

<section id="comments">
	<h2>Comments</h2>
</section>

다음으로 DOM에서 요소를 선택하는 JavaScript 코드를 작성해 보겠습니다.

const comments_section = document.getElementById("comments");

ID가 "comments"인 요소를 검색하기 위해 JavaScript 코드를 사용했습니다. 찾은 요소는 웹 페이지에서 댓글을 표시하는 <section> 요소입니다.

querySelector vs getElementById

이 두 메소드의 명확한 유사점은 둘 다 웹 페이지에서 요소를 선택한다는 점 입니다. 하지만 둘은 다른 방법을 사용합니다.

querySelector 문을 사용하면 CSS 선택자를 기반으로 요소를 선택할 수 있습니다. 즉, ID, 클래스 또는 다른 유형의 선택자로 요소를 선택할 수 있습니다. getElementById 메소드를 사용하면 해당 ID로만 요소를 선택할 수 있습니다.

일반적으로 둘 중 어떤 것을 쓸지 고를 때 작업을 가장 명확하게 수행하는 메소드를 선택해야 합니다.

ID 또는 클래스 별로 요소를 선택하기만 하면 되는 경우 각각 getElementById 또는 getElementsByClassName을 사용할 수 있습니다. 보다 정교한 규칙을 사용하여 요소를 선택해야 하는 경우 querySelector 메소드가 가장 좋습니다.

querySelector와 getElementById는 계속 JavaScript의 일부였습니다. 결과적으로 이 메소드는 모두 최신 브라우저에서 완전히 지원됩니다.

정리

querySelector 메소드는 CSS 선택자 쿼리를 통해 요소를 찾을 수 있게 해줍니다. getElementById 메소드는 DOM ID로만 요소를 찾을 수 있습니다.

두 메소드 모두 거의 모든 브라우저를 지원합니다. CSS 선택자를 사용하여 표시할 수 있는 복잡한 규칙으로 요소를 찾아야하는 경우 querySelector 메소드를 사용해야 합니다. ID로 요소를 선택하려면 getElementById를 사용하는 것이 좋습니다.

관련 글

자바스크립트 querySelector 사용 방법

자바스크립트 getElementById 사용 방법