HTML, CSS로 웹페이지를 만들었다면 이제는 동작을 구현할 차례입니다.
그 시작점이 바로 DOM(Document Object Model)입니다.
이번 글에서는 JavaScript를 활용해 DOM을 자유롭게 조작하는 방법을 기초부터 실전 예제까지 정리해 드립니다.
DOM이란?
- 웹페이지를 자바스크립트로 제어할 수 있도록 만든 트리 구조
- 브라우저가 HTML 문서를 읽어 객체(노드) 형태로 구성
- JavaScript는 이 객체들을 조작해 텍스트 변경, 스타일 수정, 이벤트 처리 등을 수행
📚 DOM = Document Object Model = HTML을 자바스크립트가 다루기 위한 인터페이스
DOM 요소 선택
1. ID로 선택
“`javascript
document.getElementById(“title”);
“`
2. 클래스 또는 태그 선택
“`javascript
document.querySelector(“.menu”); // 첫 번째
document.querySelectorAll(“li”); // 모든 li
“`
🧩
querySelector()는 CSS 선택자 그대로 사용 가능
DOM 콘텐츠 변경
“`javascript
const title = document.getElementById(“title”);
title.innerText = “변경된 제목입니다.”;
title.innerHTML = “굵게“;
“`
| 속성 | 설명 |
|——|——|
| innerText | 텍스트만 변경
| innerHTML | HTML 태그 포함 변경
| textContent | 모든 텍스트 (공백 포함) 반환
DOM 속성 & 스타일 조작
“`javascript
const img = document.querySelector(“img”);
img.src = “new-image.jpg”;
img.alt = “새 이미지 설명”;
img.style.border = “2px solid #000”;
“`
.setAttribute()로 속성 설정 가능.style로 CSS 직접 조작 가능
🖼️ ALT 태그 위치 예시:
이벤트 리스너 등록
“`javascript
const button = document.querySelector(“button”);
button.addEventListener(“click”, () => {
alert(“버튼 클릭됨!”);
});
“`
| 이벤트 종류 | 설명 |
|————-|——|
| click | 클릭 시 실행
| mouseover | 마우스 올렸을 때
| keydown | 키보드 누름
📌
removeEventListener()로 이벤트 해제도 가능
요소 생성 및 삭제
“`javascript
const newEl = document.createElement(“p”);
newEl.innerText = “새 문단입니다.”;
document.body.appendChild(newEl);
const oldEl = document.querySelector(“p”);
oldEl.remove();
“`
- 동적으로 요소를 만들고 추가/삭제 가능
appendChild,remove,replaceChild등 활용
실전 예제: Todo 항목 추가
“`html
“`
✅ DOM 조작을 통해 실시간 사용자 입력을 HTML 요소로 구현
마무리
DOM 조작은 자바스크립트의 핵심 중 하나입니다.
오늘 배운 내용을 기반으로 버튼 클릭, 이미지 변경, 입력 처리 등
사용자와 상호작용하는 웹페이지를 직접 만들 수 있습니다.
DOM을 자유자재로 다루는 것, 그게 바로 프론트엔드의 시작입니다!
🔎 다음 포스팅 주제 추천
→ 31번: JavaScript 이벤트 핸들링 완벽 가이드
→ 37번: JavaScript로 만드는 간단한 계산기
참고자료
- https://developer.mozilla.org/ko/docs/Web/API/DocumentObjectModel
- https://javascript.info/dom-nodes