❓ DOM 이란?
DOM 은 Document Objct Model 의 약자로, 문서 객체 모델이라고 한다.
DOM 은 웹 페이지를 구성하는 HTML 이나 XML 문서를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할을 한다.
그리고 이렇게 변환된 구조를 통해 자바스크립트와 같은 프로그래밍 언어가 웹 페이지의 내용을 동적으로 바꾸거나 추가하거나 삭제할 수 있도록 도와준다.
++) 동적으로 바꾼다는 의미는? (동적 웹페이지)
웹 페이지는 일반적으로 정적인 페이지로 시작된다.
사용자가 웹 페이지를 열었을 때 그 페이지의 내용은 고정되어 있다는 뜻이다.
동적으로 바꾼다는 것은 웹 페이지의 내용을 사용자와의 상호작용이나 다른 이벤트에 따라 실시간으로 수정할 수 있다는 의미이다. (버튼 조작, 양식 제출 등...)
이렇게 동적으로 조작하는 걸 가능하게 하는 언어가 자바스크립트!
❗ 웹 페이지의 구성 요소
웹 페이지는 다양한 요소들로 만들어져 있다.
예를 들어, 텍스트, 이미지, 버튼, 링크 등... 이 있다. 이 모든 요소들은 HTML 이라는 언어로 작성된다.
DOM 은 이러한 HTML 요소들을 트리 형태의 구조로 바꿔준다.
여기서 "트리 형태" 라는 것은, 말 그대로 각 요소가 나무의 가지처럼 서로 연결된 형태를 말한다.
이 트리 구조 덕분에 자바스크립트는 각 요소를 쉽게 찾아서 조작할 수 있다.
예를 들어, 웹 페이지에서 버튼의 색상을 바꾸거나 새로운 이미지를 추가하는 등의 작업을 할 때, DOM 을 통해 요소를 선택하고 수정하는 것이 가능하다.
❓ DOM 트리와 노드
위에서 말했듯이, 웹 페이지를 만들 때 우리는 HTML 을 사용하여 다양한 요소를 정의한다.
근데 브라우저는 이 HTML 을 어떻게 이해하고 표시하는 걸까?
바로 DOM 트리와 노드가 그 역할을 해준다.
❗ DOM 트리의 구조
1. 루트 노드(Root Node)
트리의 최상단에 위치한 노드로 <html> 태그가 이에 해당한다.
모든 다른 요소들은 이 루트 노드 아래에 위치하게 된다.
2. 자식 노드(Child Nodes)
루트 노드의 바로 아래에 있는 노드들이다.
<html> 아래에는 <head> 와 <body> 라는 두 개의 자식 노드가 있다.
3. 서브 노드(Sub Nodes)
자식 노드의 아래에 위치한 노드들이다.
예를 들어, <body> 태그 아래에는 <h1>, <p>, <div> 와 같은 태그들이 존재할 수 있다.
4. 리프 노드(Leaf Nodes)
트리의 끝에 위치한 노드로, 더 이상 자식이 없는 노드이다.
예를 들어, <p> 태그 안의 텍스트나 <img> 태그가 리프 노드에 해당한다.
❗ 노드에 대해
DOM 트리의 각 구성 요소는 노드(Node) 라고 불린다.
노드는 웹 페이지의 각 부분을 나타내며, DOM 트리의 기본 단위이다.
❗ 노드의 종류
1. 요소 노드(Element Node)
HTML 태그를 나타내는 노드이다. 예를 들어, <div>, <p>, <h1> 등이 요소 노드로 표현된다.
요소 노드는 자식 노드를 가질 수 있고, 다른 요소를 포함할 수 있다.
2. 텍스트 노드(Text Node)
요소 노드 내부의 실제 텍스트를 나타내는 노드이다.
예를 들어, <p>Hello World!</p> 에서 "Hello World" 가 텍스트 노드이다.
3. 속성 노드(Attribute Node)
HTML 태그의 속성을 나타내는 노드이다.
예를 들어, <img src="image.jpg" alt="Description" /> 에서 src 와 alt 는 속성 노드이다.
(속성 노드는 직접 다루기보다는 요소 노드에서 속성을 조작함)
4. 주석 노드(Comment Node)
HTML 문서의 주석을 나타내는 노드이다. 예를 들어 <!-- Comment --> 는 주석 노드이다.
주석은 브라우저에 표시되지 않는다.
❓ DOM 을 사용하는 방법
1. 요소 선택하기
웹 페이지에서 특정 요소를 찾고 싶을 때, 자바스크립트를 사용하여 그 요소를 선택할 수 있다.
예를 들어, 다음과 같은 HTML 코드가 있다고 가정해 보자.
<p id="title">Hello World</p>
이 <p> 요소를 선택하고 싶으면, 자바스크립트에서 이런 식으로 작성하면 된다.
id 가 "title" 인 요소를 선택한다는 의미이다.
let mainTitle = document.getElementById("title");
2. 내용 변경하기
선택한 요소의 내용을 바꾸고 싶으면, innerText 를 이용해 작성한다.
mainTitle.innerText = "Hello DOM";
3. 새로운 요소 추가하기
웹 페이지에 새로운 요소를 추가하고 싶을 땐, 새 요소를 생성하고 기존 페이지에다가 추가하면 된다.
// 새 <div> 요소를 만들고,
let newDiv = document.createElement("div");
// <div> 요소에 내용을 추가한다.
newDiv.innerText = "새로 추가된 <div> 요소!";
// 이 새 <div> 요소를 페이지의 <body>에 추가한다.
document.body.appendChild(newDiv);
📝 정리
1. DOM 은 HTML/XML 문서를 브라우저가 이해할 수 있는 구조로 변환하는 모델이다.
2. 웹 페이지는 HTML 로 작성된 요소들로 구성되며, DOM 은 이를 트리 형태로 변환한다.
3. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한다.
4. 노드는 DOM 트리의 기본 단위로 요소, 텍스트, 속성, 주석 등이 있다.
💡 참고 문헌
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한
developer.mozilla.org
https://ko.javascript.info/dom-nodes
DOM 트리
ko.javascript.info
https://developer.mozilla.org/ko/docs/Glossary/Node
노드 (Node) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
노드(node) 라는 용어는 상황에 따라 여러 가지 의미를 가질 수 있습니다. 다음을 참조할 수 있습니다.
developer.mozilla.org
https://ko.javascript.info/basic-dom-node-properties
주요 노드 프로퍼티
ko.javascript.info
'JavaScript' 카테고리의 다른 글
| [JS] 웹 페이지의 생명주기와 주요 이벤트 알아보기 (0) | 2024.11.18 |
|---|---|
| [JS] 브라우저 이벤트 다루기 - 키보드 / 마우스 이벤트 (0) | 2024.11.13 |
| [JS] 브라우저 요소 사이즈 확인하기 (0) | 2024.11.11 |
