DOM(Document Object Model) 쉽게 알기 JS

Min_code_Max 2024. 11. 19. 23:31

2024. 11. 19. 23:31

ㅎㅇ JS 관련 글도 쓸 생각이다.

완전 쌩 초보도 이해할 수 있게 쉽게 쓰려고 노력했음.

(이게 내 최선임)

DOM에 관련된 글이고

도대체 DOM이 뭔지에 대한 감을 잡는 간단한 글이다.

바로 본론

웹 개발을 만지다보면 DOM DOM 많이 들어봤을 텐데.

" Document Object Model "의 약자다

조선말로 " 문서 객체 모델 "이라는 뜻인데

웹 문서(Document)의 모든 요소를 프로그래밍에서 다룰 수 있는 객체(Object)로 만들고,

이러한 객체들을 계층화된 트리 구조의 모델(Model)로 정의하기 때문이다.

무슨 말인지 모르겠는데요.

그래서 Document / Object / Model 하나하나 알아볼 거다.

Object (객체)

객체는 정보와 기능이 담긴 상자라고 생각하면 된다.

객체는 대충 이런 느낌으로 생겼다. (별로 어려운 내용도 아니니 그냥 넘어가지 말고 주의 깊게 한 줄 한줄 읽는 거 추천)

let 강아지 = {
    // 강아지의 정보
    이름: "초코",
    나이: 3,
    색깔: "갈색",
    
    // 강아지가 할 수 있는 행동
    짖기: function() {
        console.log("멍멍!");
    },
    앉기: function() {
        console.log("앉았습니다");
    }
}

// 강아지 정보 보기
console.log(강아지.이름);    // "초코" 출력
console.log(강아지.나이);    // 3 출력

// 강아지 행동시키기
강아지.짖기();             // "멍멍!" 출력
강아지.앉기();             // "앉았습니다" 출력

보면 강아지의 정보와 이 강아지가 할 수 있는 행동들이 모여 있다.

다시 말하지만 객체는 정보와 기능이 담긴 상자다.

오잉 그러면 저 강아지가 객체라는 상자라는 건가요?

ㅇㅇ 맞음

강아지 = 객체
강아지 정보 = 속성
강아지가 할 수 있는 행동 = 메소드

속성과 메소드는 추후에 블로그에 적을 수도 있지만

내 귀찮음이 성실함을 툭 치면 죽어버려서 본인이 직접 찾아보는 것을 추천.

간단하게

강아지.이름(속성) 하면 강아지의 객체에 저장된 이름이 나오고

강아지.짖기() (메소드) 하면 강아지의 객체에 저장된 행동을 함. 메소드는 뒤에 ()가 붙음 그게 실행한다는 뜻임.

객체 끝

MODEL(모델)

Model은 웹 문서를 프로그래밍적으로 다룰 수 있도록 만든 인터페이스이자 문서의 구조화된 표현 방식을 의미함.

뭐라는 거야

조금 더 쉽게

여기서 MODEL은 포괄적인 개념인데

HTML을 JS로 조작할 수 있는 인터페이스이자. (리모컨 같은 거임)
HTML의 구조화된 표현 방식을 의미한다는 거임. (지도 같은 거임)

저 두 가지 의미를 둘 다 포함하고 있음 리지도모컨임 ㅇㅇ

일단 구조화된 표현 방식인 트리 구조부터

이게 트리구조임

    O  ← 이것이 하나의 '매듭점(node)'
   / \  ← 이것들은 '연결선(edge)'
  O   O ← 다른 '매듭점들(nodes)'

그리고 저 하나하나를 노드(node)라고 부름.

매듭점, 연결점, 교차점 대충 이런 뉘앙스를 가짐.

저 동글뱅이들이 노드임.

이렇게 생긴 걸 트리 모델이라고 함.

근데 왜 이 구조를 써야 하는데요

맞는 말임 분명 다른 구조도 가능했을 거임 이런 식으로

<!-- 실제 HTML -->
<div>
    <h1>제목</h1>
    <p>내용</p>
</div>

// 1. 트리 모델 
div
 ├── h1 ("제목")
 └── p ("내용")

// 2. 리스트 모델 (다른 방식)
1. div 시작
2. h1 시작
3. "제목"
4. h1 끝
5. p 시작
6. "내용"
7. p 끝
8. div 끝

근데 트리구조를 채택하면 다음과 같은 이점이 있음:

부모-자식 관계를 직관적으로 표현
요소 찾기/수정이 쉬움
HTML의 계층구조와 잘 맞음

ㅇㅇ 그래서 트리구조를 선택한 거임.

근데 도대체 누가 멀쩡한 HTML을 트리구조로 바꿔준다는 거임 자꾸

님이 보고 있는 이 브라우저가 그걸함.

이를파싱(Parsing)이라고 함.

정보를 대충 가공하는걸 파싱이라고 보면 됨.

그리고 그 파싱을 하는 놈들을 파서(Parser)라고 부름.

브라우저에는 엔진들이 있는데

그중 HTML 파서가 HTML을 파싱 해서 트리구조를 만듦.

참고로 CSS 파서가 CSS를 파싱 하면 CSSOM임 ㅋㅋ

JavaScript 엔진 (예: V8)

렌더링 엔진

이런 애들도 있음.

그럼 이제 또 의문이 생김.

도대체 누구 좋으라고 HTML을 파싱 해서 트리구조로 만드니 마니

이 난리부르스 다이아몬드 스텝을 밟고 있는 걸까?

정답은

1. 렌더링 엔진을 위해 (처음에 말한 지도 기능)

2. JS 조작을 위해. (처음에 말한 리모컨 기능임)

1. 은 위에서 언급한 렌더링 엔진이 만약 HTML 텍스트 그대로 사용하게 되면

허벌나게 뛰댕겨야됨.

부모-자식 관계 파악이 안돼서 폐륜이 발생할 수도 있고
스타일 상속 계산이 어려워서 재벌가처럼 상속분쟁이 일어날수도 있음.
레이아웃 계산도 어려워짐

암튼 렌더링 엔진이 힘들어함.

그래서 좀 효율적으로 뛰어다니라고 지도를 쥐어주는 거임.

(사실상 더 돌아다니기 편하게 맵자체를 변경한다는 표현이 조금 더 정확하지만)

결론 : 렌더링 편하자고 트리 구조로 바꾼 거임.

이론상 트리구조 없이 렌더링을 할 수 있음. 렌더링 엔진이 힘들 뿐 (렌엔 지켜 엉엉)

2. JS는 추후 설명함

NODE

아까 위에서 트리구조는 노드들을 가진다고 말했음.

1. 요소 노드(Element Node): <div>, <p> 등의 HTML 태그
2. 텍스트 노드(Text Node): 텍스트 내용
3. 속성 노드(Attribute Node): class, id 같은 속성
4. 문서 노드(Document Node): 문서 전체를 나타내는 노드
5. 주석 노드(Comment Node): HTML 주석

그래서 파싱 된 HTML은 이런 식으로 노드를 가지고 있음. 트리구조니깐.

밑은 더 자세한 예시임. (자세히 보셈)

// HTML 구조
<html>
  <head>
    <title>DOM 예시</title>
  </head>
  <body>
    <div id="container">
      <h1>제목</h1>
      <p>텍스트 내용</p>
    </div>
  </body>
</html>

// 위 HTML의 DOM 트리 구조:
document (문서 노드)
└── html (요소 노드)
    ├── head (요소 노드)
    │   └── title (요소 노드)
    │       └── "DOM 예시" (텍스트 노드)
    └── body (요소 노드)
        └── div (요소 노드)
            ├── h1 (요소 노드)
            │   └── "제목" (텍스트 노드)
            └── p (요소 노드)
                └── "텍스트 내용" (텍스트 노드)

이런 식으로 HTML이 트리구조로 변경되고
해당방식으로 노드들이 생김.

(변환된 트리구조 맨 위 주목)

어 근데 맨 위에 저 Document는 뭘까.

DOM

O(객체)에 대해서 설명했고
M(모델)에 대해서 설명했다.

마지막 남은 D(문서)

저 Document가 D다.

모델 끝

Document(문서)

Doucument는 객체다.

맨 위에 말한 그 object 객체.

지금 우리가 지지고 볶은 트리화 구조가 이 Document 객체에 들어간다.

결국 DOM이란

파싱 된 HTML이 트리 구조의 객체 모델로 변환되어

Document에 저장되어 이를 조작할 수 있는 인터페이스를 제공하는 것.

이라고 이해할 수 있다.

조금 더 자세히 알아보자

Document의 트리구조는 다음과 같다.

Document
    ├── DOCTYPE
    └── <html>
         ├── <head>
         │    ├── <title>
         │    ├── <meta>
         │    └── ...
         └── <body>
              ├── <div>
              ├── <p>
              └── ...

이 Document라는 객체 안에 트리 구조로 HTML이 들어가 있다.

실제 Document 객체의 구조는 어떻게 생겼을까?

document = {
    documentElement: HTMLHtmlElement, // <html> 태그
    head: HTMLHeadElement,           // <head> 태그
    body: HTMLBodyElement,           // <body> 태그
    
    // 주요 메서드들
    getElementById(): Element,
    getElementsByClassName(): HTMLCollection,
    getElementsByTagName(): HTMLCollection,
    querySelector(): Element,
    querySelectorAll(): NodeList,
    
    // 문서 관련 속성들
    title: String,
    URL: String,
    documentURI: String,
    characterSet: String,
    
    // 이벤트 관련
    addEventListener(): void,
    removeEventListener(): void
    
    // DOM 조작 메서드들
    createElement(): Element,
    createTextNode(): Text,
    // ... 기타 여러 속성과 메서드들
}

대략적으로 이렇게 생겼다.

Document는 객체이기 때문에

위에 설명한 강아지처럼

속성과 메소드가 있다.

위에 언급한 객체의 메소드 사용법을 떠올려보자.

강아지를 짓게 하려면 강아지.짖기() 를 사용해야 했다.

강아지.짖기()

강아지 = 객체
짖기() = 메소드

지금 나는 html 태그를 하나 선택하고 싶다고 가정해 보자.

(그때 필요한 메소드는 querySelector() 다.)

document.querySelector('p')

document = 객체
querySelector() = 메소드

이러면 p 태그를 선택할 수가 있다.

이렇게 객체를 조작하는 방식으로 JS로 간편하게 우리는 HTML을 조작할 수 있다.

왜냐

우리가 document라는 객체를 만들고 그 안에 HTML을 파싱 해서 넣었을 뿐 아니라

그 안에 유용한 메소드들이 있기 때문이다.

(참고로 메서드들은 브라우저가 추가해 준다.)

이게 모델에서 언급한 리모컨 기능이다. (인터페이스)

JS를 통해 쉽게 HTML을 조작할 수 있다.

근데 이렇게 안 하면 얼마나 더럽고 귀찮게 조작해야 되는데요?

// 1. DOM 구조가 없다고 가정하면 (HTML이 그냥 문자열)
let html = "<div><h1>제목</h1><p>내용</p></div>";

// HTML을 수정하려면 문자열 처리를 해야 함
html = html.replace("<h1>제목</h1>", "<h1>새로운 제목</h1>");
html = html.replace("<p>내용</p>", "<p>새로운 내용</p>");

------------------------------------------------------------

// 2. DOM 구조일 때 (현재 브라우저처럼)
let 제목 = document.querySelector('h1');
let 내용 = document.querySelector('p');

제목.textContent = "새로운 제목";
내용.textContent = "새로운 내용";

1번처럼 코드가 혼파망이 되어버린다.

DOM이 있음에 감사하자.

다시 document 객체로 돌아와 보자.

document = {
    documentElement: HTMLHtmlElement, // <html> 태그
    head: HTMLHeadElement,           // <head> 태그
    body: HTMLBodyElement,           // <body> 태그
    
    // 주요 메서드들
    getElementById(): Element,
    getElementsByClassName(): HTMLCollection,
    getElementsByTagName(): HTMLCollection,
    querySelector(): Element,
    querySelectorAll(): NodeList,
    
    // 문서 관련 속성들
    title: String,
    URL: String,
    documentURI: String,
    characterSet: String,
    
    // 이벤트 관련
    addEventListener(): void,
    removeEventListener(): void
    
    // DOM 조작 메서드들
    createElement(): Element,
    createTextNode(): Text,
    // ... 기타 여러 속성과 메서드들
}

뭐야 트리라더니 생긴 게 하나도 트리처럼 안 생겼잖아.

왜냐면 JS 객체를 표현하는 방식이 그렇게 보이지 않기 때문이다.

실제로는 트리 구조를 가진다.

더 자세한 예시를 보자

HTMLHtmlElement은 이렇게 생겼다.

HTMLHtmlElement = {
    // 속성들
    id: String,
    className: String,
    // ... 다른 속성들

    // 자식 요소들이 여기에 저장됨
    children: {
        0: HTMLHeadElement,  // <head>
        1: HTMLBodyElement,  // <body>
        length: 2
    }
}

children은 자식 요소들을 저장하는 곳이다

그중 자식 요소인 HTMLHeadElement 객체는 어떻게 생겼을까?

HTMLHeadElement 객체 구조

HTMLHeadElement = {
    // HTMLElement로부터 상속받은 속성들
    id: String,
    className: String,
    
    // head 요소의 자식들
    children: {
        0: HTMLMetaElement,      // <meta>
        1: HTMLTitleElement,     // <title>
        2: HTMLLinkElement,      // <link>
        length: 3
    },
    
    // 부모-자식 관계 속성/메서드
    firstChild: Node,
    lastChild: Node,
    appendChild(): Node,
    removeChild(): Node
}

보면 자식을 타고 들어가면 또 자식이 있고 또 자식이 있고 이런 식으로

트리 구조를 이루고 있다.

이를 조금 더 구조적으로 표현하면 다음과 같은 구조를 이루고 있다.

이래서 트리구조라는 거임.

다시 돌아와서

위에 나열한 Document(문서) / Object(객체) / Model(모델) 을 전부 연결해서 생각하면

D.O.M 이 DOM이 된다!

수미상관 간다.

DOM이 DOM인 이유는 다음과 같다.

웹 문서(Document)의 모든 요소를 프로그래밍에서 다룰 수 있는 객체(Object)로 만들고,

이러한 객체들을 계층화된 트리 구조의 모델(Model)로 정의하기 때문이다.

이제는 이 문장이 조금 더 친숙하게 당신에게 다가왔을 거라 믿는다.

P.S.

내가 글을 못써서 DOM의 장점을 다 못 적었다.

DOM이 어떤 방식으로 작동하는지

DOM이 뭔지 어느 정도 감이 잡혔다면 나는 그걸로 만족.

기회가 된다면 DOM을 쓰게 됨으로써 얻게 된 장점도 써보도록 하겠다.

(안쓰겠다는 뜻)

저작자표시 동일조건

'JS' 카테고리의 다른 글

1-2 메모리구조 (0)	2024.11.26
1-1 JavaScript 변수 (1)	2024.11.21

Code Max