DOM(Document Object Model) 이란? DOM Tree 란?
DOM(DOM; Document Object Model)이란
1997년 W3C에서 워킹그룹을 결성
XML 및 HTML 문서를 응용프로그램에서 사용하기 위한 API 규격
DOM이란 문서의 각 부분들을 객체로 표현한 API
문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식
DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준
W3C가 표준화한 여러 개의 API의 기반
HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원
문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다
문서 객체를 '인식하는 방식'
DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미
조금 좁은 의미로는 document 객체와 관련된 객체의 집합
웹 브라우저가 html 페이지를 인식하는 방식을 이야기 하거나 문서 객체(document object)와 관련된 객체의 집합에 관한 이야기
플랫폼, 언어 중립 interface이며 HTML 문서의 내용, 구조, 스타일을 동적으로 접근하거나 업데이트할 수 있도록 해준다
JavaScript에서는 OS나 웹 브라우저의 구성 요소, HTML 문서 등과 같은 것을 오브젝트라는 단위로 취급하는데 (이를 '오브젝트 지향'이라고 함.) HTML의 요소도 JavaScript에서는 오브젝트로 취급
HTML 문서를 태그나 속성의 계층 구조(트리 구조)로 간주하여 참조하는 개념
브라우저에 어떠한 페이지를 load 하면, DOM Structure 형태로 변환해준다
프로그램이나 스크립트가 웹 문서의 내용, 구조, 스타일에 대한 정보에 접근하거나 갱신하기 위해 사용하는 interface
HTML, XMl과 같은 Markup Language의 문서 구조와 이들 문서의 일부분을 변경할 수 있는 수단의 표준
DOM(Document Object Model)은 HTML 문서의 모든 요소에 접근하는 방법을 정의한 API
DOM은 Core DOM과 XML DOM, HTML DOM 세가지로 분류
DOM은 노드구조로 트리형태로 표현된다
DOM API는 대부분의 크로스 플랫폼이며 크로스 브라우저 를 지원 Language 독립적인 컨벤션을 가졌으며 HTML, XML 등에서 데이터를 표현하거나 상호작용하는데 사용
HTML DOM document 객체
document 객체는 웹 페이지를 나타낸다
HTML 페이지의 요소에 접근하려면 항상 document 객체에 접근해야 한다
문서요소
문서 요소는 문서의 최상위 요소이며, 다른 요소는 모두 이 안에 존재
문서 하나에 문서 요소 하나만 있을 수 있다
HTML 페이지에서 문서 요소는 항상 <html>요소
DOM Tree
문서를 node 구조로 tree 형태로 표시
node: 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시한 것
이런 이유로 DOM 구조를 node tree라고 한다(문서 document는 node들의 집합)
DOM은 tree 형식의 자료구조를 가지고 있다
DOM은 문서의 태그를 노드의 계층 구조트리로 표현
웹브라우저는 DOM 을 사용하기 때문에 자바스크립트와 CSS를 사용해서 상호작용 가능
노드를 검색하고 해당 노드의 디테일을 변경하거나, 삭제하고 새롭게 생성 가능
하나의 root node에서 시작됨
그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태
tree에서는 위쪽의 node를 부모(parent) 노드 아래쪽 노드를 자식(child)이라고 한다
root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 된다
그리고 children(자식)이 없는 node를 leaf node라고 한다
뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 것
DOM Tree 생성 -> CSSOM(CSS Object Model) Style Rules 생성 -> Render Tree에서 결합
DOM 기본 인터페이스
Node - 모든 객체의 부모 인터페이스로서 공통적으로 기능하는 함수를 가짐
NodeList - 노드들을 리스트로 받아서 처리하기 쉽도록 한것 (주로 getElementsbyTagName("태그네임") 메서드의 리턴 타입으로서 사용됨)
Document - DOM 트리 구조의 최상위 노드 / XML 문서 자체에 해당
Element - XML의 엘리먼트에 해당하는 객체 유형
Attr - XML의 Attribute에 해당하는 객체 유형
CharacterData - XML의 데이터에 해당하는 객체 유형
Text - 문자 데이터(내용)에 해당하는 객체 유형
DOM Script
DOM을 다루는 프로그래밍 기법 – Javascript를 의미
DOM 제어 속성 및 메소드
요소 찾기
getElementsByTagName 특정 태그를 가진 요소에 바로 접근 가능
getElementById 특정 아이디를 가진 요소에 바로 접근 가능
getElementsByClassName 특정 클래스를 가진 요소에 바로 접근 가능
요소 추가/삭제
createElement 원하는 요소 생성 가능
appendChild 선택된 노드에 자식으로 요소 추가 가능
removeChild 특정 요소 삭제 가능
getAttribute 해당 요소의 속성값을 얻을 수 있다
setAttribute 원하는 노드의 속성 값 바꾸기 가능
참조
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8
ps.
DOM의 문제점
동적 UI 에 최적화되어 있지 않다
DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교해서 다를 게 없다
단, 브라우저 단에서 DOM 의 변화가 일어나면, 브라우저가 CSS 를 다시 연산하고, 레이아웃을 구성하고, 웹 페이지를 리페인트 하는데, 이 과정에서 시간이 허비된다
HTML 마크업을 시각적인 형태로 변환을 하는 것은 브라우저의 주 역할이기 때문에, 이를 처리 할 때 컴퓨터 자원이 사용됨
문제를 해결하기 위해서 적어도 최소한의 DOM 조작을 통하여 작업을 처리하는 방식으로 개선 할 수는 있다
ex) DOM 업데이트를 4번 하면 브라우저에서 redraw 과정이 4번 이뤄지는데, 이를 묶어서 처리하거나, 우리가 원하는 최종 결과에는 영향을 끼치지 않아서 필요하지 않은 업데이트는 생략하게 하면 성능이 많이 개선된다
React는, Virtual DOM 이라는 방식을 사용함으로써 DOM 업데이트를 추상화하여, DOM 처리를 횟수를 최소화하고, 효율적으로 진행한다
'IT > HTML' 카테고리의 다른 글
| XML Parser(DOM / SAX)와 JSON Parser (0) | 2017.11.10 |
|---|---|
| Parsing (파싱) 이란? Parser (파서) 란? (10) | 2017.11.10 |
| Web Browser HTML Rendering 순서 (0) | 2017.11.10 |
| innerHTML과 outerHTML 차이 (0) | 2017.11.10 |
