JUST WRITE

DOM 본문

Programing/JavaScript

DOM

천재보단범재 2022. 1. 5. 15:19

Document Object Model

DOM

Document Object Model

HTML 문서에 접근하기 위한 Interface입니다.

Browser마다 요청받은 내용을 화면을 보여주는 Rendering Engine이 존재한다.

Browser Rendering Engine
IE Trident
Edge EdgeHTML, Blink
Chrome Webkit, Blink(Version 28 later)
Safari Webkit
FireFox Gecko

Rendering Engine 요청받은 HTML 문서를 한줄 한 줄 해석한다.

해석이 끝나면 문서를 객체화하며, 이 객체를 DOM(Document Object Model)이라고 한다.

Script 언어로 HTML 요소를 제어하기 위해 DOM을 이용한다.

Tree 구조

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
    	<h1>제목</h1>
        <p>안녕하세요</p>
        <div>
        	<ul>
            	<li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </div>
    </body>
</html>

DOM은 Tree 구조를 가지며 DOM Tree라고 한다.

위에 HTML 문서 하나의 Tag가 DOM Tree의 요소가 된다.

각각 요소를 Node라고 하며, 부모 Tag가 상단 Node가 된다.

DOM Tree에서 최상단, Root Node는 Document 객체이다.

 

DOM Tree

DOM Tree를 통해 원하는 Node에 접근, 제어가 가능하다.

Root Node인 Document 객체 진입점이 된다.

> document.getRootNode()
< #document //최상단 객체인 document 객체 반환

Document 객체를 기점으로 아래 Node를 찾아가거나 속성 값을 통해 접근, 제어가 가능하다.

> document.childNodes
< NodeList(2) [<!DOCTYPE html>, html]
> document.childNodes[1].childNodes
< NodeList(2) [head, body]

[참고사이트]

728x90
반응형
저작자표시 비영리

'Programing > JavaScript' 카테고리의 다른 글

BOM  (0) 2022.01.06
let vs const  (0) 2021.10.17
async vs defer  (2) 2021.08.18
'Programing/JavaScript' Related Articles more
Comments