HTML DOM 완전정복 - 웹프로그래밍 강의 정리
🎯 학습 목표
- HTML DOM의 필요성과 역할 이해하기
- DOM 트리와 HTML 페이지의 관계 파악하기
- DOM 객체를 통한 HTML 제어 방법 익히기
- document 객체와 동적 페이지 구성 방법 습득하기
📚 DOM이란 무엇인가?
HTML DOM (Document Object Model)
DOM은 HTML 문서를 객체로 표현한 모델입니다. 브라우저는 HTML 페이지를 읽어서 DOM 트리를 만들고, 자바스크립트가 이 DOM 객체들을 조작할 수 있게 해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM 트리</title>
</head>
<body>
<p style="color:blue">이것은
<span style="color:red">문장입니다.</span>
</p>
<form>
<input type="text">
<input type="button" value="테스트">
<hr>
</form>
</body>
</html>
위 HTML은 다음과 같은 DOM 트리로 변환됩니다:
document
└── html
├── head
│ └── title
└── body
├── p
│ └── span
└── form
├── input
├── input
└── hr
🏗️ DOM 객체의 구성 요소
DOM 객체는 5가지 주요 요소로 구성됩니다:
1. 프로퍼티 (Property)
- HTML 태그의 속성을 반영
- id, tagName, innerHTML 등
2. 메소드 (Method)
- DOM 객체를 제어하는 함수
- click(), focus(), setAttribute() 등
3. 컬렉션 (Collection)
- 자식 DOM 객체들의 집합
- children, childElementCount 등
4. 이벤트 리스너 (Event Listener)
- HTML 태그의 이벤트 처리
- onclick, onload, onkeydown 등
5. CSS3 스타일
- HTML 태그의 스타일 정보
- style.color, style.backgroundColor 등
🔍 DOM 객체 찾기
1. ID로 찾기
가장 기본적이고 많이 사용되는 방법입니다.
// HTML: <p id="firstP">안녕하세요</p>
var p = document.getElementById("firstP");
p.style.color = "red";
2. 태그 이름으로 찾기
같은 태그를 모두 찾아 배열로 반환합니다.
var divTags = document.getElementsByTagName("div");
for(var i = 0; i < divTags.length; i++) {
divTags[i].style.backgroundColor = "yellow";
}
3. 클래스명으로 찾기
같은 클래스를 가진 요소들을 모두 찾습니다.
var plainClasses = document.getElementsByClassName("plain");
🎨 CSS 스타일 동적 변경
DOM 객체의 style 프로퍼티를 통해 CSS를 동적으로 변경할 수 있습니다.
function changeStyle() {
var span = document.getElementById("mySpan");
span.style.color = "green"; // 글자 색상
span.style.fontSize = "30px"; // 글자 크기
span.style.display = "block"; // 디스플레이 속성
span.style.width = "6em"; // 너비
span.style.border = "3px dotted magenta"; // 테두리
span.style.margin = "20px"; // 여백
}
💡 주의사항: CSS 속성명이 하이픈(-)을 포함하는 경우, 카멜케이스로 변경해야 합니다.
- background-color → backgroundColor
- font-size → fontSize
📝 innerHTML과 this 키워드
innerHTML 프로퍼티
태그의 내용을 동적으로 변경할 수 있습니다.
var p = document.getElementById("myP");
p.innerHTML = "새로운 <strong>내용</strong>입니다!";
this 키워드
이벤트가 발생한 객체 자신을 가리킵니다.
<button onclick="this.style.backgroundColor='orange'">
클릭하면 배경색 변경
</button>
<div onclick="changeColor(this, 'red')">
클릭하면 빨간색으로 변경
</div>
📄 document 객체
document 객체는 HTML 문서 전체를 대표하는 최상위 객체입니다.
주요 프로퍼티
document.title // 문서 제목
document.URL // 문서 URL
document.domain // 도메인
document.body // body 요소
document.head // head 요소
document.readyState // 로딩 상태
document.write() 메소드
HTML 페이지에 동적으로 내용을 추가할 수 있습니다.
document.write("<h3>Welcome!</h3>");
document.write("<p>오늘은 " + new Date() + "입니다.</p>");
// 줄바꿈이 필요한 경우
document.writeln("첫 번째 줄");
document.writeln("두 번째 줄<br>");
⚡ 동적 DOM 조작
DOM 객체 생성
// 새로운 div 요소 생성
var newDiv = document.createElement("div");
newDiv.innerHTML = "새로 생성된 DIV입니다.";
newDiv.setAttribute("id", "myDiv");
newDiv.style.backgroundColor = "yellow";
DOM 트리에 추가
// 부모 요소의 마지막에 추가
var parent = document.getElementById("parent");
parent.appendChild(newDiv);
// 특정 위치에 삽입
parent.insertBefore(newDiv, 기준요소);
DOM 객체 삭제
// 자식 요소 삭제
var parent = myDiv.parentElement;
parent.removeChild(myDiv);
// 또는 이벤트 핸들러에서
newDiv.onclick = function() {
var p = this.parentElement;
p.removeChild(this);
};
💻 실전 예제: 동적 요소 추가/삭제
<!DOCTYPE html>
<html>
<head>
<title>동적 DOM 조작</title>
<script>
function createDiv() {
var parent = document.getElementById("container");
var newDiv = document.createElement("div");
newDiv.innerHTML = "클릭하면 삭제됩니다!";
newDiv.style.backgroundColor = "lightblue";
newDiv.style.padding = "10px";
newDiv.style.margin = "5px";
newDiv.style.cursor = "pointer";
// 클릭 시 자신을 삭제하는 이벤트
newDiv.onclick = function() {
this.parentElement.removeChild(this);
};
parent.appendChild(newDiv);
}
</script>
</head>
<body>
<h3>동적 DIV 생성/삭제 예제</h3>
<button onclick="createDiv()">DIV 추가</button>
<div id="container"></div>
</body>
</html>
🎯 핵심 정리
- DOM은 HTML을 객체로 표현한 모델입니다
- **document.getElementById()**로 특정 요소를 찾을 수 있습니다
- style 프로퍼티로 CSS를 동적으로 변경할 수 있습니다
- **innerHTML**로 요소의 내용을 변경할 수 있습니다
- this 키워드는 이벤트가 발생한 객체를 가리킵니다
- **document.createElement()**로 새로운 요소를 생성할 수 있습니다
- **appendChild()와 removeChild()**로 요소를 추가/삭제할 수 있습니다
DOM을 마스터하면 정적인 HTML을 동적이고 인터랙티브한 웹페이지로 만들 수 있습니다! 🚀
이 포스팅이 도움이 되셨다면 공감과 댓글 부탁드립니다! 😊
728x90
반응형
'개발 공부 > HTML' 카테고리의 다른 글
| 📘 10강 – BOM (브라우저 객체 모델) (1) | 2025.06.09 |
|---|---|
| 📘 9강 – 이벤트 처리 (0) | 2025.06.09 |
| 📘 7강 – 자바스크립트 객체 (1) | 2025.06.09 |
| 📘6강 - 자바스크립트 기초 (2) | 2025.06.05 |
| 📘5강 - CSS3 고급: 레이아웃, 스타일링, 애니메이션의 모든 것 (2) | 2025.06.05 |