WEB/javascript

DOM

일상코더 2023. 3. 8. 15:08

DOM(Document Object Model)이란?

 

         문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜

         표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 

         즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작 할 수 있게끔 연결시켜주는 역할을 담당한다.

 

 

DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까?

 

          DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 

          제공하는 트리 자료구조이다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.

 

 

트리 자료구조는 노드들의 계층 구조로 이루어져 있다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계,
형제관계를 표현하는 비선형 자료구조를 나타낸다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content"IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<h2 style="color:blue">DOM 문서 객체 모델</h2>
</body>
</html>

위의 html 문서를 트리구조로 표현하면 아래와 같다.

 

 

 

document node (문서 노드)

          - DOM Tree 에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다. 

          - HTML 문서 전체를 나타내는 노드이다.

          - window 객체의 document 프로퍼티로 바인딩(연결)이 되어 있어 window.document, document로 참조해서 사용할 수 있다.

 

element node (요소 노드)

          - 모든 HTML 요소 (body, h2, div 등)

          - 속성 노드를 가질 수 있는 유일한 노드 

          - 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 해준다.

 

attribute node (속성 노드)

          - 모든 HTML 요소의 속성은 이 속성 노드 이다. 

          - 요소 노드에 대한 정보를 가지고 있다. 

          - 부모 노드가 아닌 해당 노드와 연결(바인딩) 되어 있다.

 

text node (텍스트 노드)

          - HTML 문서의 모든 텍스트는 이 텍스트 노드라 해도 과언이 아니다.

          - 텍스트 노드는 정보를 표현하고, 가장 마지막에 위치하는 자식 노드이기 때문에

             잎사귀를 닮았다고 해서 리프 노드라 한다. 

 

     => 이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작 할 수 있게 된다. 

           특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 접근하여 조작하여

           업데이트를 하는 속도는 빠른 편이다. 

 

 

javascript 와 DOM의 관계

 자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중에서 가장 유명한 언어이다.

웹 페이지를 만듦에 있어서 거의 한 몸 처럼 사용하게 되다 보니, 가끔 자바스크립트와 DOM을 혼동해

"자바스크립트 안에 DOM에 있는거 아니냐" 혹은 "DOM은 자바스크립트로만 다룰 수 있는 거 아니냐"

같은 심심한 오해가 생기게 되기도 한다. 하지만 자바스크립트와 DOM은 엄밀히 다른 개념이며, 꼭

자바스크립트로만 DOM을 다룰 수 있는 것도 아니다. 

 

 

javascript 와 dom 이 다른 개념인 이유

 DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있기 때문이다.

DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

즉 , DOM은 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스라는 것이다.

 

 

DOM의 정적 생성과 동적 생성

 

  동적 생성

 

 지금 현재 브라우저에 내장되어 있는 언어는 자바스크립트이고, 자바스크립트는 가장 간편하고 빠르게

DOM으로 구조화된 웹 문서에 접근하여 노드들을 조작 할 수 있다.

자바스크립트를 이용해 HTML 문서에 없는 노드를 만들어 이어 붙여 웹 페이지에 렌더링되게 만드는 모든 과정이

동적으로 구현 하는 것이라 볼 수 있다. 또는 자바스크립트를 이용해 있던 노드에 없는 노드를 만들어 이어 붙이는 것도

동적으로 구현한다고 볼 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <h2 id="h2-title" style="color:blue">DOM 문서 객체 모델 </h2>
    
     <script src="sample.js" />
</body>
</html>

-> 스크립트 태그를 달아 외부의 자바스크립트 파일을 연결하고, h2 태그에 id를 달아 일련의 작업을 하게 된다면

     이것은 동적으로 노드를 생성한다고 본다.

 

  

  정적 생성

        정적으로 생성되는 과정은 오로지 이미 HTML 파일에 적혀 있는 코드를 위에서부터

        아래로 읽어내려가며 생성하는 과정만을 뜻한다. 즉 HTML 문서에 직접 태그로 작성하는 것만을

        정적으로 생성한다고 보기 때문에, 이런 부분에서 차이가 날 수 밖에 없다. 

 

<!DOCTYPE html>
<html lang="ko">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<h2 style="color:blue">DOM 문서 객체 모델 </h2>
</body>
</html>

-> 단순히 코드를 읽어내려 웹페이지에 콘텐츠를 띄우는 과정은 정적 생성 과정이다.

     여기에는 자바스크립트가 접근하여 DOM을 조작한 흔적이 없다.