[J.S_DOM] 2. DOM 요소 선택하기 (getElementById, querySelector 등)

 

2.0 DOM 요소 선택 메서드

웹 페이지를 만들고 스크립트를 작성 시 가장 먼저 하게 되는 일 중 하나: HTML 요소를 선택하는 것
이 작업이 바로 DOM 요소 선택

자바스크립트는 이를 위해 다양한 메서드를 제공

 

이 글에서는 다음과 같이 DOM 요소를 선택하는 메서드들을 범주별로 나누어 정확하고 체계적으로 정리도록 하자 

2.1 기본 선택 메서드(가장 자주 쓰이는 5가지 중요!)

메서드	설명	반환값	특징
getElementById()	ID로 요소 1개 선택	Element	가장 빠르고 단순
getElementsByClassName()	클래스명으로 여러 요소 선택	HTMLCollection	실시간 컬렉션
getElementsByTagName()	태그명으로 여러 요소 선택	HTMLCollection	전체 태그 조회
querySelector()	CSS 선택자 기준 첫 요소 선택	Element	유연하고 강력
querySelectorAll()	CSS 선택자 기준 모든 요소 선택	NodeList	정적 리스트, forEach 가능

2.2 특수 목적 메서드(HTML 요소 전용)

배열처럼 []로 접근 가능하며, 특정 요소만 다룰 때 유용

메서드	설명	반환값	특징
document.forms	문서 내 모든 <form> 요소	HTMLCollection	인덱스로 접근 가능
document.images	모든 <img> 요소	HTMLCollection	자주 사용되는 전용 속성
document.links	모든 <a> 태그 중 href 가진 것	HTMLCollection	내비게이션 요소 대상
document.anchors	name 속성 가진 <a> 요소	HTMLCollection	과거 방식, 잘 안 씀
document.scripts	모든 <script> 요소	HTMLCollection	동적 로딩 제어에 활용 가능

2.3 요소 탐색 메서드 (DOM 트리 기반)

DOM 구조를 따라 탐색할 때 사용

메서드	설명	반환값	특징
element.children	자식 요소 전부	HTMLCollection	텍스트 노드는 제외됨
element.firstElementChild	첫 번째 자식 요소	Element	첫 요소만 반환
element.lastElementChild	마지막 자식 요소	Element	마지막 요소만 반환
element.parentElement	부모 요소	Element	상위 DOM으로 접근
element.nextElementSibling	다음 형제 요소	Element	같은 부모 기준 다음
element.previousElementSibling	이전 형제 요소	Element	같은 부모 기준 이전

2.4 고급 선택 메서드

클릭된 요소에서 가장 가까운 .card 요소를 찾고 싶을 때 closest()를 사용

메서드	설명	반환값	특징
element.closest(selector)	현재 요소부터 시작해 조상 요소를 따라가며, 주어진 CSS 선택자와 일치하는 가장 가까운 요소를 반환	Element / null	폼 내 버튼 클릭 시, 가장 가까운 .form-group 찾기 등에 유용
element.matches(selector)	현재 요소가 주어진 CSS 선택자와 일치하는지 불리언(true/false)으로 반환	Boolean	조건 검사에 사용, 이벤트 위임과 함께 자주 쓰임