[용어정리] DOM (Document Object Model)

 

 

| DOM(Document Object Model)

  기본적으로 DOM은 "웹페이지"와 "스크립트" 혹은 "프로그래밍 언어"를 결합하는 역할을 한다. 브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장한다. 
그렇게 저장된 정보를 "DOM Tree"라고 한다. 즉, HTML element는 Tree 형태로 저장되는 것이다. 복잡한 DOM Tree의 경우 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하는 일은 매우 힘들다. 그래서 브라우저에서는 DOM(Document Object Model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음)를 제공하고 있다.
다시 말해 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공하고 있다.

 

---

 

DOM

- Document Object Model

- Document = html문서를 말합니다.

- 브라우저가 공장이라고 칩시다.

- HTML 문서는 이 공장들에 보내는 주문서입니다.

- 이 주문서에는 내가 원하는 웹페이지의 요소들과, 그 구조가 설계도처럼 표현돼있죠.

- 구체적인 구조를 HTML이란 주문서에 담아서, 웹페이지에 접속할 때 쓰는 브라우저에 보내는 거죠.

- 그러면 공장에서 이 주문서를 보고 그 안의 HTML요소들을 실제 제품들로 뚝딱뜍딱 제작을 하는거에요.

- 이 DOM을 사용해서 원하는대로 웹 화면을 보여주고, 필요에 따라 자바스크립트로 이 DOM을 조작할 수 있는 거죠.

- 자바스크립트로 조작을 할 수 있다? 라면 DOM은 자바스크립트의 요소인가요?

아닙니다, 자바스크립트를 사용해서 명령을 받을 수 있고, 실제로 그렇게 가장 흔히 사용이 되지만, 이 DOM이 특정 언어에 종속지는 않아요.자바스크립트의 객체는 아니지만,

자바스크립트 등등등등을 사용해서 

제어할 수 있는 대상이라는 이야기죠,.

 

아~~ 그래가지고 그 파이썬에서도 BeautifulSoup 가지고다가 DOM을 조작하고 그러고 할 수 있는거구나,

 

그렇습니다,,, 이처럼 어떤 언어로든 라이브러리만 갖춰지면 이 DOM을 조작할 수 있는데,

그건 이 DOM이 API를 갖고 있어서에요

 

API는 그거 잖아요. 어떤 방식으로 명령이나 요청을 내리면은

그거에 따라서 무슨 기능들을 수행하도록 만들어 놓은거.

 

맞습니다. 즉 이  DOM 이나, 그 부품들에 각각

그 기능별로 버튼같은게 달려 있다고 보면 돼요.

 

어떤 언어로든 그 버튼을 눌러서 기능을 작동시킬 수 있는거죠.

... 생략 ...

 

여튼 이 DOM안에는 각종 node들이 트리 구조로 들어 있어요.

 

 

노드라는 것은

DOM의 모든 요소들, html든,div든, radio든, table이든,

이것들은 모두 node로부터 상속받아요.

그냥 모든 HTML Element, 즉 HTMl 요소들은 기본적으로 node다라고 이해하시면 돼요.

 

하여튼간 DOM의 구성요소들이 기본적으로다가 다 Node니까

DOM은 이 Node들로 만들어진다고 한다는 거죠.

 

그럼 이 Node의 기능이라고 한 건 어떤것들이에요?

HTML요소들에서 공통적으로 볼 수 있는 기능들은 다수가 Node의 속성 또는 기능이라고 보시면 돼요.

이런것들이 다 node의 기능들입니다

그리고 이 node는 또 EventTarget으로부터 상속받기 때문에 

즉 Node는 클릭 등의 이벤트가 가해지는 EventTarget이기 때문에

이 요소들은 모두 addEventListener 등의 기능 도한 갖고있는거에요.

 

결국 이런 API들로 구성돼있기 때문에

MDN사이트에서는 이 DOM을 정의하기를 

'HTML이나 XML문서를 나타내는 API'라고 해요,

그게 DOM의 공식 정의에 가까운거네요.

 

 

그러면 이 DOM에 그럼 CSS같은것도 포함이 되는건가요?

CSS는 CSS Object Model, CSSOM(크쏨ㅋㅋㅋ)이란걸로 따로 만들어져요.

 

이 CSSOM도 포함 관계로 나타내지는만큼

트리 형식으로 출력이 돼요.

 

브라우저는 DOM트리랑 CSSOM트리를 융합해서

우리가 보는 화면들을 만들어내는거죠,

 

그리고 Browser Object Model이라고 BOM이란 것도 있어요.

이거는 브라우저 자체를 다루기 위한 API인데

윈도운 안에

이것들이 다 BOM에서 제공되는 것들이에요.

 

(참고)

https://www.youtube.com/watch?v=1ojA5mLWts8

 

---

 

 

 

 

관련된 DOM API에 대한 정보는 아래의 링크 확인:
https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference

문서 객체 모델(DOM)