1. DOM API란?
DOM API(Document Object Model Application Programming Interface)는 웹 브라우저가 제공하는 인터페이스로,
자바스크립트를 통해 HTML 문서(DOM 구조)를 읽고, 수정하고, 조작할 수 있도록 하는 기능 모음입니다.
즉, 브라우저가 HTML 문서를 트리 구조로 메모리에 저장해두고, 개발자는 DOM API를 통해 그 구조를 자바스크립트로 자유롭게 다룰 수 있는 것입니다.
2. DOM API의 기본 사용 흐름
DOM API는 크게 다음 3단계 흐름으로 사용합니다.
1. 요소 선택: 조작할 HTML 요소를 선택
2. 정보 읽기/쓰기: 요소의 속성이나 내용을 읽거나 수정
3. 구조 변경 or 이벤트 연결: 새로운 요소 추가, 삭제, 클릭 등의 이벤트 연결
// 예시: 버튼을 눌렀을 때 문장의 색을 바꾸는 코드
const btn = document.getElementById("myBtn");
const msg = document.getElementById("message");
btn.onclick = function () {
msg.style.color = "blue";
msg.textContent = "색이 바뀌었어요!";
};3. DOM 요소 선택
가장 먼저 해야 할 일은 조작하고 싶은 요소를 찾는 것입니다.
DOM API는 다양한 선택 메서드를 제공합니다.
| 메서드 | 설명 |
|---|---|
| getElementById(id) | id로 단일 요소 선택 |
| getElementByClassName(class) | class 이름으로 여러 요소 선택 |
| getElementByTagName(tag) | 태그 이름으로 선택 |
| querySelector(selector) | CSS 선택자 방식으로 하나 선택 |
| querySelectorAll(selector) | CSS 선택자 방식으로 여러 개 선택 |
예시
const title = document.getElementById("title");
const buttons = document.querySelectorAll(".btn");참고: CSS 선택자
DOM 요소를 선택할 때 사용하는 표현식으로, CSS에서 쓰는 방식과 완전히 동일합니다.
| 선택자 | 의미 | 예시 |
|---|---|---|
| #id | id 선택 | #main |
| .class | 클래스 선택 | .btn |
| tag | 태그 선택 | div, p, h1 ... 등 |
| tag.class | 특정 태그 + 클래스 | div.card |
| parent child | 자식 요소 | ul li |
| tag[attr] | 특정 속성 존재 | a[href] |
| tag[attr=value] | 속성값 일치 | input[type="text"] |
| parent > child | 직계 자식 | ul > li |
| .class1.class2 | 복수 클래스 동시 조건 | .btn.active |
4. DOM 속성 읽기/수정
요소를 선택한 후에는 내용, 속성, 스타일 등을 읽거나 수정할 수 있습니다.
내용 조작
| 속성 | 설명 |
|---|---|
| textContent | 순수 텍스트만 읽기/쓰기 |
| innerHTML | HTML 포함하여 읽기/쓰기 |
| innerText | 화면에 보이는 텍스트 기준 읽기/쓰기 |
예시
title.textContent = "변경된 제목";속성 조작
| 메서드/속성 | 설명 |
|---|---|
| getAttribute(name) | 속성값 가져오기 |
| setAttribute(name, value) | 속성값 설정 |
| removeAttribute(name) | 속성 제거 |
| .id, .className, .href | 직접 속성처럼 접근 가능 |
예시
link.setAttribute("target", "_blank");
console.log(link.href);5. 스타일 조작
style 속성을 통해 CSS 스타일을 직접 제어할 수 있습니다.
속성명은 - 대신 camelCase로 씁니다.
title.style.color = "green";
title.style.backgroundColor = "lightgray";6. 클래스 조작 (classList)
HTML 요소에 여러 클래스를 효율적으로 추가/삭제/토글할 수 있습니다.
element.classList.add("active"); // 클래스 추가
element.classList.remove("hidden"); // 클래스 제거
element.classList.toggle("on"); // 있으면 제거, 없으면 추가
element.classList.contains("on"); // 포함 여부 확인 (true / false)7. 요소 생성/삭제/이동
새로운 HTML 요소를 자바스크립트로 만들고, DOM 트리에 추가하거나 제거할 수 있습니다.
요소 생성 & 삽입
const newDiv = document.createElement("div");
newDiv.textContent = "새 박스";
document.body.appendChild(newDiv);기존 요소 제거
document.body.removeChild(newDiv);| 메서드 | 설명 |
|---|---|
| createElement(tag) | 새 요소 노드 생성 |
| appendChild(node) | 자식으로 추가 |
| removeChild(node) | 자식 요소 제거 |
| replaceChild(new, old) | 기존 요소를 새 요소로 교체 |
8. 이벤트 연결
HTML 요소에 클릭, 입력 등 사용자 이벤트가 발생했을 때 자바스크립트 코드가 실행되도록 설정할 수 있습니다.
방법 1: 속성 방식
btn.onclick = function () {
alert("버튼 클릭!");
};방법 2: 이벤트 리스너 방식 (추천)
btn.addEventListener("click", function () {
alert("버튼 클릭!");
});| 메서드 | 설명 |
|---|---|
| addEventListener(event, handler) | 이벤트 연결 |
| removeEventListener(event, handler) | 이벤트 제거 |
addEventListener 방식은 여러 이벤트를 중복 등록할 수 있어서 더 유연합니다.
- 속성 방색 (기존 방식)
button.onclick = function () {
console.log("첫 번째 클릭!");
};
button.onclick = function () {
console.log("두 번째 클릭!");
};- 이 경우, 두 번째 함수가 첫 번째를 덮어씌움
- 실행하면 "두 번째 클릭!"만 출력됩니다.
- 즉, 이전 이벤트가 사라지고 마지막 것만 유지됩니다 (중복 등록 불가능).
- addEventListener 방식 (권장 방식)
button.addEventListener("click", function () {
console.log("첫 번째 클릭!");
});
button.addEventListener("click", function () {
console.log("두 번째 클릭!");
});- 이 경우, 두 갱의 이벤트 핸들로가 모두 실행됨
- 즉, 한 요소에 같은 이벤트를 여러 개 등록할 수 있습니다 (중복 등록 가능).
donggyun_ee