[Javascript & Jquery] DOM이란

rush0wj·2024년 9월 20일

Javascript & Jquery

목록 보기

3/4

DOM (Document Object Model)은 웹 페이지의 구조를 표현하는 객체 기반의 트리 구조로, 브라우저가 HTML 문서를 읽고 각 요소를 객체로 변환해 구조화한 형태입니다. 즉, HTML 문서를 브라우저가 이해할 수 있도록 객체화한 버전이라고 보면 됩니다.

브라우저가 HTML 문서를 로드하면 그 문서를 DOM 트리로 변환하며, 자바스크립트는 이 DOM을 통해 HTML 요소에 접근하고 조작할 수 있습니다.

DOM 트리 예시

만약 다음과 같은 HTML이 있다면:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Welcome to DOM</h1>
    <p>This is a paragraph.</p>
</body>
</html>

이 HTML은 다음과 같은 트리 구조로 표현됩니다:

Document
 ├── html
 │   ├── head
 │   │   └── title (DOM Example)
 │   └── body
 │       ├── h1 (Welcome to DOM)
 │       └── p (This is a paragraph.)

위 트리 구조에서,Document는 최상위 객체(문서 전체)이고, 그 아래에 html, head, body와 같은 노드들이 있습니다. 각 노드는 그 안에 다른 요소들을 포함할 수 있습니다.

DOM 예시

DOM은 HTML 요소에 접근하고, 변경할 수 있도록 해줍니다. 예를 들어, 자바스크립트를 사용해 <h1> 태그의 텍스트를 변경하는 것은 DOM을 통해 이루어집니다.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="heading">Welcome to DOM</h1>
    <button id="changeTextButton">Change Text</button>

    <script>
        // 자바스크립트를 통해 DOM의 요소에 접근하여 텍스트 변경
        document.getElementById('changeTextButton').addEventListener('click', function() {
            // DOM을 통해 h1 요소에 접근하여 텍스트 변경
            document.getElementById('heading').textContent = 'DOM Changed!';
        });
    </script>
</body>
</html>

설명:

브라우저가 HTML을 읽고 DOM 트리를 구성합니다.
document.getElementById('heading')는 DOM 트리에서 <h1 id="heading"> 요소에 접근합니다.
textContent 속성을 사용해 <h1> 태그의 텍스트를 변경합니다.
버튼을 클릭하면 DOM을 통해 h1 요소의 텍스트가 "DOM Changed!"로 바뀝니다.

DOM의 주요 개념

노드 (Node): DOM 트리의 각 요소를 말합니다. <html>, <head>, <body> 등 모든 HTML 요소는 노드입니다.
부모/자식 관계: DOM 트리에서 상위에 있는 노드는 부모 노드, 하위에 있는 노드는 자식 노드입니다.
속성: 각 노드는 다양한 속성을 가지고 있으며, 자바스크립트를 통해 이 속성들을 조작할 수 있습니다.

DOM을 통해 자주 사용되는 조작들

HTML 요소 접근: document.getElementById(), document.querySelector()
속성 변경: element.textContent, element.innerHTML
클래스 추가/제거: element.classList.add(), element.classList.remove()
이벤트 바인딩: element.addEventListener()

DOM은 자바스크립트와 HTML이 상호작용하는 핵심적인 부분입니다.

rush0wj

Developer Record

이전 포스트

[Javascript & Jquery] DOM이란