웹 개발을 하다보면 DOM이라는 단어를 자주 보게 되고, DOM 어쩌고 하는 에러도 어렵지 않게 만날 수 있다. 도대체 DOM이란 무엇인지 알아보고 포스팅을 해본다 !
DOM(Document Object Model)이란 HTML이나 XML 문서를 브라우저가 동적으로 처리할 수 있게 해주는 프로그래밍 인터페이스로 문서를 트리 구조로 표현하며, JavaScript 같은 언어로 구조, 내용, 스타일을 바꿀 수 있다.
1. DOM이란?
DOM은 문서를 **노드(Node)**라는 기본 단위로 구성하고, 부모-자식 관계로 이루어진 트리 구조로 표현한다. 이를 통해 문서의 구조나 내용을 쉽게 제어할 수 있다.
DOM의 주요 역할
- 문서를 트리 형태로 표현한다.
- JavaScript 같은 언어와 연동해 동적으로 문서를 제어할 수 있다.
- HTML의 요소, 속성, 텍스트, 스타일 등을 접근하고 수정할 수 있다.
2. DOM의 트리 구조
HTML 문서를 DOM으로 표현하면 계층적인 구조가 만들어진다.
HTML 코드 예시
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>DOM 트리 구조
Document
├── html
├── head
│ └── title
└── body
├── h1
└── pDOM 노드의 종류
- 문서 노드 (Document Node): 문서의 최상위 루트 노드 (예: <html>).
- 요소 노드 (Element Node): HTML 태그 (예: <body>, <h1>).
- 텍스트 노드 (Text Node): 태그 내부의 텍스트 (예: "Welcome").
- 속성 노드 (Attribute Node): HTML 태그의 속성 (예: id="title").
3. DOM을 JavaScript로 다루는 방법
DOM을 이용하면 JavaScript로 여러 작업을 할 수 있다.
1) 요소 선택하기
DOM 요소를 선택하려면 아래 메서드를 사용한다:
// ID로 요소 선택
const elementById = document.getElementById('example');
// CSS 선택자로 요소 선택
const elementByQuery = document.querySelector('.example');
// 태그 이름으로 요소 선택
const elementsByTag = document.getElementsByTagName('p');2) 요소 생성하고 추가하기
새로운 요소를 만들어 DOM에 추가:
const newElement = document.createElement('div');
newElement.textContent = 'Hello, DOM!';
document.body.appendChild(newElement);3) 요소 수정하기
선택한 요소의 내용 바꾸기:
const title = document.getElementById('title');
title.textContent = 'Updated Title';4) 요소 삭제하기
요소를 삭제하려면 부모 노드에서 자식을 제거한다:
const elementToRemove = document.getElementById('example');
elementToRemove.parentNode.removeChild(elementToRemove);
4. DOM 활용 예시
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<div id="app">
<h1>Welcome</h1>
</div>
<script src="app.js"></script>
</body>
</html>JavaScript (app.js)
// 요소 선택
const app = document.getElementById('app');
// 새 요소 생성
const paragraph = document.createElement('p');
paragraph.textContent = 'This is dynamically added text.';
// 새 요소 추가
app.appendChild(paragraph);결과: <p>This is dynamically added text.</p>가 <div id="app"> 안에 동적으로 추가 됨.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<div id="app">
<h1>Welcome</h1>
<p>This is dynamically added text.</p>
</div>
<script src="app.js"></script>
</body>
</html>5. DOM의 장점
- 동적 콘텐츠: 사용자 행동에 따라 실시간으로 내용을 바꿀 수 있다.
- 상호작용: 이벤트 핸들러를 추가해 사용자와 상호작용을 구현할 수 있다.
- 유연성: 문서의 구조와 스타일을 프로그래밍적으로 제어할 수 있다.
6. 마무리
쉽게 말해 DOM은 HTML 문서의 요소를 생성, 수정하고 필요할 땐 가져와서 사용할 수 있는 편리한 도구이다.
DOM (Document Object Model) 직역하면 문서 객체 모델...??
이해하기 쉽게 번역을 해본다면 "동적 HTML 편집도구" 라고 하면 좋을 듯 하다 !
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
'IT > 지식' 카테고리의 다른 글
| OWASP이란? OWASP Top 10 최신 버전 (9) | 2025.02.01 |
|---|---|
| Authentication(인증)과 Authorization(인가) 차이? (0) | 2025.01.31 |
| ERP(Enterprise Resource Planning, 전사적 자원관리)란 무엇인가? (3) | 2025.01.30 |
| 임베디드(Embedded) 시스템이란 ? (7) | 2025.01.28 |
| CI(Connection Information), DI(Duplication Information)란? (1) | 2025.01.24 |
