[JavaScript] DOM 요소 선택 메서드

728x90

목 차

• 1. DOM 선택 메서드 종류
• 2. DOM 선택 메서드 설명
• 2-1. document.getElementById
• 2-2. document.getElementsByClassName
• 2-3. document.getElementsByTagName
• 2-4. document.querySelector
• 2-5. document.querySelectorAll

반응형

 

1. DOM 선택 메서드 종류

메서드	설명	반환값
getElementById	특정 ID를 가진 첫 번째 요소를 선택	단일 요소
getElementsByClassName	특정 클래스를 가진 모든 요소를 선택	HTMLCollection (유사 배열)
getElementsByTagName	특정 태그 이름을 가진 모든 요소를 선택	HTMLCollection (유사 배열)
querySelector	CSS 선택자와 일치하는 첫 번째 요소를 선택	단일 요소
querySelectorAll	CSS 선택자와 일치하는 모든 요소를 선택	NodeList (유사 배열)

 

2. DOM 선택 메서드 설명

※ DOM API란?

DOM API는 JavaScript와 웹 페이지의 구조화된 문서(HTML 또는 XML) 간의 상호작용을 가능하게 하는 인터페이스입니다. 이를 통해 브라우저에서 로드된 DOM을 동적으로 탐색하고 수정할 수 있습니다.

 

2-1. document.getElementById

• ID 속성을 기반으로 특정 요소를 선택합니다.

// getElementById 사용법
const element = document.getElementById('myId');

 

2-2. document.getElementsByClassName

• 특정 클래스 이름을 가진 요소들을 선택합니다.

// getElementsByClassName 사용법
const elements = document.getElementsByClassName('myClass');

 

2-3. document.getElementsByTagName

• 특정 태그 이름을 가진 모든 요소를 선택합니다.

// getElementsByTagName 사용법
const elements = document.getElementsByTagName('div');

 

2-4. document.querySelector

• CSS 선택자와 같은 문법으로 첫 번째 요소를 선택합니다.

// querySelector 사용법
const element = document.querySelector('.myClass');
const element2 = document.querySelector('#myId');

 

2-5. document.querySelectorAll

• CSS 선택자와 같은 문법으로 모든 요소를 선택합니다(노드리스트 반환).

// querySelectorAll 사용법
const elements = document.querySelectorAll('.myClass');