DOM (Document Object Model) 이해하기
DOM(Document Object Model)은 웹 개발에서 HTML이나 XML 문서의 구조를 표현하고 조작하기 위한 시스템입니다. 쉽게 말해서, DOM은 웹 페이지의 내용을 프로그래밍 언어(주로 JavaScript)를 통해 동적으로 변경할 수 있게 해주는 구조입니다. 이 글에서는 초보자도 쉽게 이해할 수 있도록 DOM의 기본 개념과 사용법을 설명하겠습니다.
DOM의 기본 개념
-
노드(Node):
- 설명: DOM의 기본 단위로, 웹 페이지의 각 부분을 나타냅니다.
- 예: 텍스트, 태그, 속성 등이 모두 노드입니다.
- 비유: 노드는 나무의 가지나 잎과 같은 존재로, DOM 트리를 구성합니다.
-
요소(Element):
- 설명: HTML 태그를 나타내는 노드입니다.
- 예:
<div>,<p>,<span>등. - 비유: 요소는 건물의 벽돌처럼 웹 페이지의 구조를 만듭니다.
-
텍스트(Text):
- 설명: 요소 내에 있는 실제 텍스트 내용을 나타내는 노드입니다.
- 예:
<p>Hello, World!</p>에서 "Hello, World!" 부분. - 비유: 텍스트는 책의 글자와 같습니다.
-
속성(Attribute):
- 설명: 요소의 추가 정보를 나타내는 노드입니다.
- 예:
<img src="image.jpg" alt="이미지">에서src와alt. - 비유: 속성은 제품의 설명서와 같습니다.
DOM 트리 구조
HTML 문서가 DOM으로 변환되면, 문서의 각 부분이 트리 형태로 연결됩니다. 이 구조는 부모-자식 관계로 이루어져 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 예제</title>
</head>
<body>
<div id="container">
<p>안녕하세요, <span>DOM!</span></p>
</div>
</body>
</html>위 HTML 문서의 DOM 트리 구조는 다음과 같습니다:
html
├── head
│ ├── meta
│ └── title
└── body
└── div#container
└── p
├── 텍스트("안녕하세요, ")
└── span
└── 텍스트("DOM!")DOM 조작
JavaScript를 사용하여 DOM을 조작할 수 있습니다. 이를 통해 웹 페이지의 내용을 동적으로 변경하거나 새로운 요소를 추가할 수 있습니다.
예제: DOM 조작
먼저, HTML 문서의 일부를 변경해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 조작 예제</title>
</head>
<body>
<div id="myDiv">원래 텍스트</div>
<button id="changeTextBtn">텍스트 변경</button>
<script src="script.js"></script>
</body>
</html>위의 HTML 파일에서 JavaScript를 사용하여 div 요소의 텍스트를 변경해보겠습니다.
// script.js
// DOM 요소 선택
const myDiv = document.getElementById('myDiv');
const changeTextBtn = document.getElementById('changeTextBtn');
// 버튼 클릭 시 텍스트 변경
changeTextBtn.addEventListener('click', () => {
myDiv.textContent = '변경된 텍스트';
});이 예제에서:
document.getElementById('myDiv'):id가myDiv인 요소를 선택합니다.myDiv.textContent = '변경된 텍스트': 선택한 요소의 텍스트를 변경합니다.addEventListener('click', ...): 버튼을 클릭하면 지정된 함수가 실행됩니다.
주요 DOM 메서드 및 속성
DOM을 조작할 때 자주 사용하는 메서드와 속성들입니다:
-
document.getElementById(id): 주어진
id를 가진 요소를 반환합니다.const element = document.getElementById('myId'); -
document.getElementsByClassName(className): 주어진
class를 가진 모든 요소를 배열 형태로 반환합니다.const elements = document.getElementsByClassName('myClass'); -
document.getElementsByTagName(tagName): 주어진 태그 이름을 가진 모든 요소를 배열 형태로 반환합니다.
const elements = document.getElementsByTagName('div'); -
document.querySelector(selector): 주어진 CSS 선택자를 만족하는 첫 번째 요소를 반환합니다.
const element = document.querySelector('.myClass'); -
document.querySelectorAll(selector): 주어진 CSS 선택자를 만족하는 모든 요소를 배열 형태로 반환합니다.
const elements = document.querySelectorAll('div.myClass'); -
element.textContent: 요소의 텍스트 내용을 설정하거나 가져옵니다.
element.textContent = '새로운 텍스트'; -
element.innerHTML: 요소의 HTML 내용을 설정하거나 가져옵니다.
element.innerHTML = '<span>새로운 HTML</span>'; -
element.setAttribute(name, value): 요소의 속성을 설정합니다.
element.setAttribute('class', 'newClass'); -
element.getAttribute(name): 요소의 속성을 가져옵니다.
const value = element.getAttribute('class'); -
element.appendChild(child): 요소의 자식 요소로
child를 추가합니다.element.appendChild(newElement); -
element.remove(): 요소 자신을 DOM 트리에서 제거합니다.
element.remove();
결론
DOM은 웹 페이지의 구조와 내용을 프로그래밍적으로 접근하고 조작할 수 있게 해주는 매우 중요한 개념입니다. JavaScript를 통해 DOM을 조작하면 웹 페이지를 동적으로 변경하고, 사용자와 상호작용할 수 있는 다양한 기능을 구현할 수 있습니다. 이 글을 통해 DOM의 기본 개념과 조작 방법을 이해하는 데 도움이 되었기를 바랍니다.
