카테고리 없음

JavaScript에서 HTML 요소 찾기: getElementsByTagName vs querySelector

micalcomanie 2025. 2. 14. 05:16
728x90
반응형
SMALL

 

 

안녕하세요! 오늘은 JavaScript에서 HTML 요소를 검색(Search)하는 방법에 대해 배운 내용을 정리해보려고 합니다.
특히, getElementsByTagName()과 querySelector()의 차이점을 알아보고, 어떤 경우에 querySelector()가 더 유용한지 살펴보겠습니다.

1. HTML 요소 찾기: getElementsByTagName()

getElementsByTagName()은 특정 태그 이름을 가진 모든 요소를 찾아서 HTMLCollection 형태로 반환합니다.

📌 사용법

const title = document.getElementsByTagName("h1");
console.log(title);

📝 특징

✅ 태그 이름을 기반으로 요소를 찾는다.
✅ 여러 개의 요소를 HTMLCollection 형태로 반환한다.
✅ HTMLCollection은 배열처럼 보이지만, forEach()를 직접 사용할 수 없다. (배열로 변환해야 함)
✅ 실시간으로 DOM 변경 사항을 반영한다.

🚨 단점

  • 원하는 특정 요소를 찾기 어렵다.
  • CSS 선택자 기반의 세밀한 검색이 불가능하다.
  • 반환된 HTMLCollection을 직접 배열 메서드(map, forEach 등)로 다룰 수 없다.

2. 더 유용한 querySelector()

querySelector()는 CSS 선택자를 사용하여 특정 요소를 찾을 수 있는 강력한 방법입니다.

📌 사용법

const title2 = document.querySelector(".hello h1:first-child");
console.log(title2);

위 코드에서는 .hello 클래스를 가진 요소 내부의 첫 번째 <h1> 요소를 선택합니다.

📝 특징

✅ CSS 선택자를 사용할 수 있어 유연하다.
✅ 첫 번째 요소만 반환하므로 특정 요소를 찾을 때 유용하다.
✅ querySelectorAll()을 사용하면 여러 요소를 NodeList 형태로 반환한다.
✅ NodeList는 forEach() 같은 배열 메서드를 직접 사용할 수 있어 편리하다.

🚀 장점

  • CSS 선택자를 사용하여 더 세밀한 검색이 가능하다.
  • 특정 요소를 찾는 코드가 직관적이고 간결하다.
  • querySelectorAll()을 활용하면 배열처럼 다룰 수 있는 NodeList를 반환한다.

3. 비교 정리: getElementsByTagName() vs querySelector()

방법반환 타입검색 방식특징

getElementsByTagName("h1") HTMLCollection 태그 이름 기반 모든 요소 반환, 실시간 DOM 반영
querySelector(".hello h1:first-child") Element (단일 요소) CSS 선택자 기반 첫 번째 일치하는 요소만 반환
querySelectorAll("h1") NodeList CSS 선택자 기반 모든 일치하는 요소 반환, forEach() 사용 가능

💡 언제 어떤 방법을 사용해야 할까?

  • 특정한 하나의 요소를 찾고 싶다면? → querySelector() 사용
  • 여러 개의 요소를 선택하고 싶다면? → querySelectorAll() 사용
  • 태그 이름으로 모든 요소를 가져오고 싶다면? → getElementsByTagName() 사용하지만, 가급적 querySelectorAll()이 더 유용함

4. 실습: 버튼 클릭 시 특정 요소 변경하기

아래 예제는 querySelector()를 사용하여 버튼 클릭 시 특정 <h1> 요소의 텍스트를 변경하는 코드입니다.

🔹 HTML 코드

<div class="hello">
    <h1>Click me!</h1>
    <button id="changeText">Change Text</button>
</div>

🔹 JavaScript 코드

const title = document.querySelector(".hello h1");
const button = document.getElementById("changeText");

button.addEventListener("click", function() {
    title.innerText = "Text Changed!";
});

실행 결과

  • 초기 화면: <h1>Click me!</h1>
  • 버튼 클릭 후: <h1>Text Changed!</h1>

이처럼 querySelector()를 활용하면 특정 요소를 간단하게 선택하여 조작할 수 있습니다.

오늘 배운 내용을 정리하면:

✅ getElementsByTagName()은 태그 이름을 기반으로 요소를 찾으며, HTMLCollection을 반환한다.
✅ querySelector()는 CSS 선택자를 기반으로 첫 번째 요소를 찾으며, 더 직관적이고 유연한 방법이다.
✅ 여러 요소를 선택하려면 querySelectorAll()을 사용하면 된다.
✅ 일반적으로 querySelector()와 querySelectorAll()이 더 유용하다.

이제 querySelector()를 활용하여 더욱 효율적인 JavaScript 코드를 작성해보세요! 😊 

728x90
반응형
LIST