[JS] querySelector와 getElementBy

JavaScript에서 DOM 요소를 선택할 때, querySelector와 getElementBy 계열 메서드는 가장 흔히 사용되는 선택 방법입니다. 두 가지 방법 모두 DOM 요소를 선택하는 데 사용되지만, 사용법과 특징, 차이점이 있습니다.

---

1. querySelector

querySelector는 CSS 선택자를 사용하여 DOM 요소를 선택하는 메서드입니다. querySelector는 보통 복잡한 선택자가 필요할 때와 첫 번째 일치 요소만 선택하면 충분할 때 그리고 코드의 유연성과 가독성을 중시할 때 사용합니다.

document.querySelector(selector);

// id 선택
const elementById = document.querySelector("#myId");

// 클래스 선택
const elementByClass = document.querySelector(".myClass");

// 태그 선택
const elementByTag = document.querySelector("div");

// 속성 선택
const elementByAttribute = document.querySelector("[type='text']"); 

2. getElementBy 

getElementBy는 Id 값이나 Class 이름 , 태그 이름으로 요소를 찾을 때 사용한다.

• getElementById : Id 속성으로 요소를 선택

const element = document.getElementById("myId"); // id가 "myId"인 요소 선택, 없으면 null 반환

• getElementsByClassName : 클래스 이름으로 요소를 검색

const elements = document.getElementsByClassName("myClass"); // 클래스가 "myClass"인 모든 요소 선택 없으면 빈 컬렉션 반환

• getElementsByTagName : 태그 이름으로 요소를 선택

const elements = document.getElementsByTagName("div"); // 모든 div 요소 선택

 

 

특징	querySelector	getElementBy
선택 방식	CSS 선택자 기반	id, className, tagName 기반
반환 값	첫 번째 일치 요소 (단일 요소)	단일 요소 (getElementById) 또는 다중 요소 (HTMLCollection)
다중 선택 여부	단일 요소만 반환	getElementsByClassName 및 getElementsByTagName는 다중 요소 반환
동적 컬렉션	정적(NodeList)	동적(HTMLCollection)
유연성	매우 유연 (복잡한 CSS 선택 가능)	제한적 (특정 속성 기반 선택)
속도	약간 느림 (CSS 선택자 파싱 필요)	빠름 (직접 속성 접근)
요소가 없을 때 반환 값	null	null 또는 빈 HTMLCollection