DOM(Document Object Model)

Web

DOM(Document Object Model)

PeterC 2021. 3. 5. 18:01

# DOM, 문서 객체 모델

웹 페이지는 일종의 문서(Document)이다. 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.

DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

브라우저 객체 모델?

브라우저와 관련된 객체들의 집할을 브라우저 객체 모델(BOM; Browser Object Model)이라 부른다. 이 BOM을 이용해서 브라우저와 관련된 기능들을 구성하는데 DOM은 이 BOM 중의 하나이다.

BOM의 취상위 객체는 Window라는 객체인데, DOM은 Window 객체의 하위 객체이기도 하다.

문서 객체 모델?

ㅁ 문서 객체?

문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다.

ㅁ DOM?

문서를 객체로 표현하기 위한 표준으로서 HTML이나 XML등의 문서를 객체로 표현할 때 사용하는 API이며, 이들 문서에 대하여 구조적인 표현(구조화 객체 모델)방법을 제공한다. 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM은 구조화된 nodes와 property와 method를 갖고 있는 object 로 문서를 표현한다.

! HTML attribute와 property의 차이

ㅁ attribute?

Attributes는 HTML 요소의 추가적인 정보를 전달하고 <이름="값"> 이렇게 쌍으로 온다.

ㅁ property?

Property는 attribute에 대한 HTML DOM 트리안에서의 표현으로

ㅁ 차이

Attributes는 HTML 텍스트 문서에 있는 것이고 Properties는 HTML DOM 트리에 있다. Property는 DOM안에 존재하는데 사용자가 박스에 텍스트 입력 및 체크를 한다거나 JavaScript로 값을 변경하면 동적으로 값이 변할 수 있는 반면 attribute는 HTML 문서안에 존재하고 있기 때문에 변하지 않고 초기(Default) 값을 전달한다.

문서 객체 모델의 종류

1	Core DOM	ㅁ 모든 문서 타입을 위한 DOM 모델 - Core DOM 최초 객체 모델이 완성된 1988년 부터 HTML과 XML등을 다루기 위해서 생겨났다. - 이후 HTML DOM, XML DOM 등이 추가되었지만 웹 브라우저간의 호환성이 뛰어나 사용됨.
2	HTML DOM	ㅁ HTML 문서를위한 DOM 모델 - HTML 태그에 대한 기본 모델로 ID를 사용해 객체모델을 작성한다.
3	XML DOM	ㅁ XML 문서를 위한 DOM 모델 - XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의한다. - 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있다.

객체모델 계층 구조

DOM은 트리형식의 자료구조를 가지고 있다. 하나의 Root Node에서 시작되며 위쪽의 Node를 부모(Parent), 아래쪽의 Node를 자식(Child)라고 한다.

ㅁ Node의 의미.

트리 형식의 자료구조에서 Root Node를 포함한 모든 개개의 개체를 Node라고 표현하는데 'head', 'body', 'title', 'sciprt', 'h1', 'Header-1' ... 등의 태그 뿐만 아니라 태그 안의 텍스트나 속성 등도 모두 Node에 속한다.

이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소노느 안에 있는 글자를 Text 노드라고 부르기도 한다.

ㅁ HTML DOM