[톺아보기 시리즈] getElementById, getElementsByClassName, querySelector, querySelectorAll

목차

· document.getElementById

· document.getElementsByClassName

· document.querySelector

· document.querySelectorAll

· 전체적으로 비교해보기

· 언제 사용을 하면 좋을까요?

---

이 네가지 모두 DOM에서 특정 요소를 선택하는 방법을 의미하지만, 동작 방식과 반환 값이 모두 사소한 차이점을 가지고 있어요.

document.getElementById

기능

· 특정 id 값을 가진 요소 하나를 가져와요

반환 값

· Element 또는 null

특징

· 가장 빠른 선택 방법 (ID는 문서에서 유일해야하므로 빠름)

· 항상 단일 요소만 반환

· ID가 존재하지 않으면 null 반환

const element = document.getElementById("myId");
console.log(element); // id가 "myId"인 요소 (Element)

document.getElementsByClassName

기능

· 특정 클래스를 가진 모든 요소를 가져와요

반환 값

· HTMLCollection

특징

· 여러 개의 요소를 가져와요 (HTMLCollection 형태)

· forEach를 직접 사용할 수 없고, Array.from()을 통해 변환이 필요해요

· 라이브 컬렉션으로 구성이 되어있기 때문에, DOM이 변경되면 자동으로 업데이트되어요.

const elements = document.getElementsByClassName("myClass");
console.log(elements); // "myClass" 클래스를 가진 모든 요소 (HTMLCollection)

document.querySelector

기능

· CSS 선택자 문법을 사용하여 첫 번째 요소를 가져와요

반환 값

· Element (단일 요소) 또는 null

특징

· CSS 선택자 문법을 사용하여 요소를 가져올 수 있어요 (#id, .class, tag, div > p 등)

· 첫 번째 요소만을 반환해요

· 존재하지 않으면 null을 반환해요

· 가독성이 좋고, 직관적이에요 (가장 유연한 방식)

const element = document.querySelector(".myClass"); // 클래스 선택
console.log(element); // "myClass" 클래스를 가진 첫 번째 요소를 의미해요 (Element)

document.querySelectorAll

기능

· CSS 선택자 문법을 사용하여 모든 요소를 가져와요

반환 값

· NodeList (배열과 비슷한 유사 배열 객체)

특징

· CSS 선택자를 통해 모든 요소를 선택할 수 있어요

· NodeList 형태 (일반 배열처럼 forEach를 사용할 수 있어요)

· 정적인 리스트 (DOM 변경 시, 자동 업데이트가 되지 않아요)

const elements = document.querySelectorAll(".myClass");
console.log(elements); // "myClass" 클래스를 가진 모든 요소 (NodeList)

전체적으로 비교해보기

메서드	반환 타입	여러 개 선택이 가능한가요?	CSS 선택자를 통해 선택이 가능한가요?	DOM이 업데이트 되는 것을 반영하여 가져오나요?
getElementById	Element 또는 null	항상 하나만 선택 가능	불가	불가
getElementsByClassName	HTMLCollection	여러 개 선택 가능	불가	가능
querySelector	Element 또는 null	첫 번째 요소만 선택 가능	가능	불가
querySelectorAll	NodeList	여러 개 선택 가능	가능	불가

언제 사용을 하면 좋을까요?

· ID로 특정 요소를 찾을 때 : getElementById

· 같은 클래스를 가진 여러 요소를 찾을 때 : getElementByClassName

· CSS 선택자를 사용하여 첫 번째 요소를 찾을 때 : querySelector

· CSS 선택자를 사용하여 여러 요소를 찾을 때 : querySelectorAll