[JS] DOM 트리와 노드

JavaScript

[JS] DOM 트리와 노드

방혜진 2024. 9. 18. 14:44

❓ 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 문서의 주석을 나타내는 노드이다. 예를 들어  는 주석 노드이다.

주석은 브라우저에 표시되지 않는다.

❓ 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);