DOM(Document Object Model) 메서드 상세 설명
DOM 메서드는 웹 페이지의 구조, 내용, 스타일을 프로그래밍적으로 조작할 수 있게 해주는 JavaScript 인터페이스입니다. 아주 자세히 설명드리겠습니다.
DOM의 기본 개념
DOM(Document Object Model)은:
- HTML/XML 문서를 계층적 트리 구조로 표현한 프로그래밍 인터페이스
- 문서를 노드(Node)와 객체로 구성하여 표현
- JavaScript가 웹 페이지와 상호작용할 수 있게 해줌
주요 DOM 메서드 종류
1. 요소 선택 메서드
| 메서드 | 설명 | 예시 | 반환 값 |
|---|---|---|---|
getElementById() |
ID로 단일 요소 선택 | document.getElementById('header') |
단일 요소 또는 null |
getElementsByClassName() |
클래스 이름으로 요소 컬렉션 선택 | document.getElementsByClassName('menu') |
HTMLCollection (live) |
getElementsByTagName() |
태그 이름으로 요소 컬렉션 선택 | document.getElementsByTagName('div') |
HTMLCollection (live) |
querySelector() |
CSS 선택자로 첫 번째 요소 선택 | document.querySelector('.btn.active') |
단일 요소 또는 null |
querySelectorAll() |
CSS 선택자로 모든 요소 선택 | document.querySelectorAll('p.warning') |
NodeList (static) |
2. 요소 생성/수정 메서드
| 메서드 | 설명 | 예시 |
|---|---|---|
createElement() |
새 요소 생성 | document.createElement('div') |
createTextNode() |
텍스트 노드 생성 | document.createTextNode('안녕하세요') |
appendChild() |
자식 노드 추가 | parent.appendChild(child) |
removeChild() |
자식 노드 제거 | parent.removeChild(child) |
replaceChild() |
자식 노드 교체 | parent.replaceChild(new, old) |
cloneNode() |
노드 복제 | element.cloneNode(true) |
3. 속성/내용 조작 메서드
| 메서드 | 설명 | 예시 |
|---|---|---|
setAttribute() |
속성 설정 | img.setAttribute('src', 'logo.png') |
getAttribute() |
속성 값 가져오기 | link.getAttribute('href') |
removeAttribute() |
속성 제거 | input.removeAttribute('disabled') |
textContent |
텍스트 내용 설정/가져오기 | div.textContent = '새 내용' |
innerHTML |
HTML 내용 설정/가져오기 | container.innerHTML = '<span>추가</span>' |
4. 스타일 조작 메서드
// 스타일 직접 변경
element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';
// 클래스를 통한 스타일 변경
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');5. 이벤트 처리 메서드
| 메서드 | 설명 | 예시 |
|---|---|---|
addEventListener() |
이벤트 리스너 추가 | btn.addEventListener('click', handler) |
removeEventListener() |
이벤트 리스너 제거 | btn.removeEventListener('click', handler) |
dispatchEvent() |
이벤트 발생시키기 | element.dispatchEvent(new Event('change')) |
DOM 메서드 사용 예제
<!DOCTYPE html>
<html>
<head>
<title>DOM 메서드 예제</title>
<style>
.highlight { background-color: yellow; }
.hidden { display: none; }
</style>
</head>
<body>
<div id="container">
<h1 id="mainTitle">DOM 데모</h1>
<ul class="itemList">
<li>항목 1</li>
<li>항목 2</li>
</ul>
<button id="actionBtn">실행</button>
</div>
<script>
// 요소 선택
const btn = document.getElementById('actionBtn');
const list = document.querySelector('.itemList');
// 이벤트 리스너 추가
btn.addEventListener('click', function() {
// 새 요소 생성 및 추가
const newItem = document.createElement('li');
newItem.textContent = `항목 ${list.children.length + 1}`;
list.appendChild(newItem);
// 스타일 변경
newItem.classList.add('highlight');
// 속성 변경
if (list.children.length > 3) {
btn.setAttribute('disabled', 'true');
btn.textContent = '더 이상 추가 불가';
}
});
</script>
</body>
</html>DOM 레벨 별 발전 과정
- DOM Level 1 (1998): 기본 문서 구조 조작
- DOM Level 2 (2000): 이벤트 모델, CSS 지원 추가
- DOM Level 3 (2004): XML 지원 확장, 키보드 이벤트
- DOM Living Standard: 현재 WHATWG에서 관리하는 현대 표준
현대 DOM API의 특징
- 메서드 체이닝 지원:
document.querySelector('#container') .querySelectorAll('li') .forEach(item => item.classList.add('active'));- 더 풍부한 선택 방법:
// 최근 추가된 메서드 document.getElementById('mainTitle').closest('div'); document.querySelector('li').nextElementSibling;- 성능 최적화:
DocumentFragment사용으로 배치 삽입 최적화- MutationObserver로 효율적인 DOM 변경 감시
DOM 메서드는 웹 개발의 가장 기본적이면서도 강력한 도구입니다. 이러한 메서드들을 조합하면 동적이고 인터랙티브한 웹 페이지를 만들 수 있습니다.
'프로그래머로의 여정' 카테고리의 다른 글
| 이벤트 리스너(Event Listener) (0) | 2025.06.09 |
|---|---|
| DOM에서 노드(Node), 객체(Object), 요소(Element)의 개념 (0) | 2025.06.08 |
| Socket과 Port (0) | 2025.05.28 |
| SQLyog vs MySQL Workbench (0) | 2025.05.28 |
| CDN (Content Delivery Network) (0) | 2025.05.27 |
