[javascript] 요소 선택 메서드 (getEementById, getElementsByClassName, queryselector ...)

javascript 요소 선택

• 각 메서드는 특정 상황에서 적절하게 사용 가능
• querySelector / querySelectorAll → 가장 유연하고 대부분의 상황에서 대응 가능
• 반복이 필요한 경우 NodeList는 forEach를 바로 사용할 수 있지만, HTMLCollection은 Array.from()으로 변환해야 함.

---

요소 탐색 대상

• 요소 선택 메서드는 document와 부모 요소가 탐색 대상이 됨 
• getElementById()의 경우 documnet만 가능

탐색 대상 객체	설명
document	웹 페이지 전체 문서 전체
Element (특정 요소)	특정 요소 내 자식 요소들만 탐색

---

---

getElementById()

// [문법]
document.getElementById('아이디');

• 용도: id 속성이 있는 요소 하나를 선택
• 반환값: 단일 요소 객체 (HTMLElement)
• 특징:
  • id는 문서 내에서 고유해야 하므로 이 메소드는 항상 하나의 요소만 반환함.
  • 빠르고 직관적임.
  • 반드시 document에서만 호출 가능, 특정 영역 내에 id를 찾고 싶은 경우 querySelector을 사용

const title = document.getElementById('main-title');
console.log(title); // <h1 id="main-title">안녕하세요</h1>

✓ 신분증 번호(ID) 로 사람 하나를 딱 찾는 것

---

getElementsByClassName()

// [문법]
document or Element.getElementsByClassName('클래스명');

• 용도: 특정 class 속성을 가진 모든 요소 선택
• 반환값: 유사 배열 객체 (HTMLCollection)
• 특징:
  • 실시간 컬렉션 (DOM이 변경되면 자동으로 업데이트됨)
  • 반복문(for, for...of, Array.from())을 사용해 접근 가능

<ul>
  <li class="menu-item">메뉴1</li>
  <li class="menu-item">메뉴2</li>
  <li class="menu-item">메뉴2</li>
</ul>

const items = document.getElementsByClassName('menu-item');
console.log(items); // HTMLCollection(3) [li.menu-item, li.menu-item, li.menu-item]
console.log(items[0]); // 첫 번째 li

✓ "같은 유니폼을 입은 사람들(클래스명)을 한 줄로 세운 것"
     → 여러 명이지만 정확한 배열은 아님! (forEach는 안 되고, for, index는 가능)

---

getElementsByTagName()

// [문법]
document or Element.getElementByTagName('태그');

 

• 용도: 특정 태그명을 가진 모든 요소 선택 (예: ul, li, div..)
• 반환값: 유사 배열 객체 (HTMLCollection)
• 특징:
  • 특정 태그명을 가진 요소들 실시간 리스트

✓ "모든 <li> 태그들을 한 상자에 담은 것"   → 개수는 많지만 배열은 아님

---

querySelector()

// [문법]
document or Element.querySelector('CSS 선택자');

• 용도: CSS 선택자 방식으로 요소 하나 선택
• 반환값: 첫 번째로 일치하는 단일 요소 (Element)
• 특징:
  • 유연하고 강력함 (CSS 선택자 모두 사용 가능)
  • 가장 많이 사용되는 방식 중 하나

const firstBtn = document.querySelector('.btn');
console.log(firstBtn); // 첫 번째 .btn 요소

✓ "가장 먼저 눈에 띄는 사람 요소을 골라냄"  
      → CSS 선택자 사용 가능. #id,. class, div > span 다 가능함.

---

querySelectorAll()

// [문법]
document or Element.querySelectorAll('CSS 선택자');

• 용도: CSS 선택자 방식으로 여러 개의 요소를 모두 선택
• 반환값: 정적 NodeList (배열 비슷한 객체)
• 특징:
  • 정적 컬렉션 (DOM 변경 시 자동 업데이트 안 됨)
  • forEach() 사용 가능
  • 배열 메서드 직접 사용 불가 → 필요시 Array.from()으로 변환

const buttons = document.querySelectorAll('.btn');
console.log(buttons); // NodeList(3) [button.btn, button.btn, button.btn]
buttons.forEach(btn => console.log(btn.textContent));

✓ "조건에 맞는 사람 전부를 사진 찍듯 한 번에 쫙 뽑아서 리스트로 만든 것"
     → 배열처럼 생겼고, forEach() 사용 가능! 다만 이후 DOM 변화에는 반응 안 함.

---

자바스크립트 요소 선택 비교

메소드	선택 기준	반환	특징
getElementById	id	요소 1개	가장 빠름, 고유한 id 사용
getElementsByClassName	class	HTMLCollection (유사 배열)	실시간 반영, 반복문 필요
getElementsByTagName	태그	HTMLCollection (유사 배열)	실시간 반영
querySelector	CSS 선택자	요소 1개	강력하고 유연함
querySelectorAll	CSS 선택자	NodeList (유사 배열)	정적 목록, forEach 가능

---

 

[javascript] 유사 배열