HTML DOM과 Document 객체: 자바스크립트로 웹 페이지 제어하기
안녕하세요! 웹 개발의 심화 과정으로 진입하는 중요한 관문, 바로 HTML DOM(Document Object Model)과 이를 다루는 핵심 객체인 Document 객체에 대해 알아보는 시간입니다. 자바스크립트가 웹 페이지의 HTML 요소를 직접 제어할 수 있게 해주는 마법 같은 기술이죠.
목차
- HTML DOM이란 무엇인가?
- DOM 트리의 구조와 HTML 페이지의 관계
- Document 객체: 웹 페이지의 문지기
- HTML 요소(DOM 객체)에 접근하는 방법
- HTML 요소 다루기: 동적인 웹 페이지 만들기
- 마무리하며
1. HTML DOM이란 무엇인가?
HTML DOM은 웹 페이지를 자바스크립트가 이해하고 조작할 수 있도록 객체 모델 형태로 표현하는 것입니다.
자바스크립트가 사용하는 3가지 객체 유형
- BOM (Browser Object Model):
window, history, screen등 - 코어 객체:
Array, Date, Math등 - DOM (Document Object Model): HTML 문서를 트리 구조로 표현
2. DOM 트리의 구조와 HTML 페이지의 관계
HTML은 계층 구조를 가지며, DOM은 이를 트리 형태로 객체화합니다.
- 요소 노드: HTML 태그
- 텍스트 노드: 태그 안의 텍스트
- 속성 노드: 태그의 속성
DOM을 통해 부모-자식 관계로 요소를 찾고 조작할 수 있습니다.
<html>
├─ <head>
└─ <body>
├─ <div>
└─ <p>텍스트</p>
3. Document 객체: 웹 페이지의 문지기
Document 객체는 웹 페이지의 루트 객체로 모든 HTML 요소에 접근하는 관문입니다.
Document 객체의 주요 역할
- 문서 상태 확인 (
document.readyState) - HTML 요소 생성/삭제/변경
- 이벤트 핸들링
- 요소 검색
4. HTML 요소(DOM 객체)에 접근하는 방법
Document 객체는 다양한 메서드를 통해 HTML 요소에 접근할 수 있습니다:
<p id="myParagraph" class="text-content">안녕하세요!</p>
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
<script>
// ID로 접근
let paragraph = document.getElementById("myParagraph");
console.log(paragraph.textContent); // "안녕하세요!"
// Class로 접근
let boxes = document.getElementsByClassName("box");
console.log(boxes[0].textContent); // "첫 번째 박스"
// CSS 선택자 사용
let firstBox = document.querySelector(".box");
console.log(firstBox.textContent);
</script>
5. HTML 요소 다루기: 동적인 웹 페이지 만들기
콘텐츠 및 스타일 변경
paragraph.textContent = "Hello, World!";
paragraph.style.color = "blue";
paragraph.style.fontSize = "20px";속성 변경
paragraph.setAttribute("title", "소개 문장");
console.log(paragraph.getAttribute("title"));요소 생성 및 삭제
// 요소 생성
let newDiv = document.createElement("div");
newDiv.textContent = "동적으로 생성된 DIV";
newDiv.style.backgroundColor = "yellow";
// 부모 요소에 추가
let parent = document.getElementById("container");
parent.appendChild(newDiv);
// 삭제
parent.removeChild(newDiv);
6. 마무리하며
HTML DOM과 Document 객체는 정적인 HTML을 동적인 웹 애플리케이션으로 변화시키는 핵심 도구입니다. 자바스크립트를 통해 요소를 선택하고, 조작하며, 새로 생성하고 삭제하는 방법을 익힌다면, 사용자와 상호작용하는 진정한 웹 페이지를 만들 수 있습니다.
지금부터 자주 써보고 직접 예제를 구현해 보세요. 반복해서 연습하면 DOM 조작 능력은 눈에 띄게 향상될 것입니다!
'HTML' 카테고리의 다른 글
| HTML.윈도우와 브라우저 관련 객체 (0) | 2025.05.25 |
|---|---|
| HTML.이벤트 기초 및 활용 (0) | 2025.05.25 |
| HTML.자바스크립트 코어 객체와 배열 (5) | 2025.05.24 |
| HTML.자바스크립트 기초 (0) | 2025.05.24 |
| HTML.고급 CSS (0) | 2025.05.24 |