DOM(Document Object Model)

choijw1116·2020년 9월 27일
0

Codestates

목록 보기
2/4
post-thumbnail

DOM(Document Object Model)

DOM에 대해서 이야기 하기전에 간단히 BOM(Browser Object Model)에 대해 이야기하고 넘어가보자. BOM은 브라우저 객체 모델이라고 한다. BOM을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 BOM 중의 하나이다. BOM의 최상위 객체는 window라는 객체 인데, _DOM은 window 객체의 하위객체_이기도 하다.

~~**자 그렇다면, **~~

DOM은 무엇일까?

DOM을 풀어서 쓰면, Document Object Model이다. Document는 문서, Object는 객체 Model은 모델로 해석할 수 있다. 직역해 보면 문서객체모델 이라고 할 수 있다. 여기서 문서객체는 HTML에서 쓰이는 나 과 같은 html문서 태그들을 JavaScript가 이용할 수 있는 object로 만들면 그것을 문서객체 라고 한다. 여기서의 Model은 모형과같은 단어도 있지만, 모듈이라고 해석하면 조금 더 편할것같다. 즉, _문서객체를 '인식하는 방식'이 DOM_이라고 말할 수 있겠다.

DOM은 어떻게 생겼을까?

DOM은 tree형식의 자료구조를 가지고 있다. tree형식의 자료구조는 하나의 root node에서 시작된다. 나무처럼 위로 뻗어나가는 것이 아닌, 위의 root node에서 아래로 펴져나가는 형태이다. tree에서 위쪽의 node를 부모노드 (parent node), 아래의 노드를 자식노드(child node)라고 한다. root node는 가장 위에서 시작되는 node이므로 parent node가 없는 node가 된다. 그리고 자식노드(child node)가 없는 node는 leaf node라고 한다. root에서 lear에서 끈나는 것이다.

Node가 무엇인가?

그렇다면, 위에서 자꾸 언급되는 node는 대체 무엇일까? node는 tree구조에서 root node를 포함한 모든 개체를 node라고 말한다. head, body,title, h1 등의 태그 뿐만 아니라 태그 안의 텍스트, 속성 등을 모두 포함해 node에 속한다.

문서객체가 생성되는 방식은 2가지로 나누어볼 수 있다. 정적과 동적 2가지가 있다. 웹브라우저가 HTML 페이지에 적혀있는 태그를 읽으면 생성하는 것이다. 이런 과정을 정적으로 문서객체를 생성한다 라고 말한다. 단순히 적혀져있는 그대로 문서객체가 생성되는 것을 표편한 것이다.

반대로 원래 HTML에 없던 문서객체를 JavaScript를 이용해서 생성하는 방법이 있는데, 이런과정을 동적으로 문서객체를 생성한다.

아래는 JavaScript를 이용해 동적으로 문서객체를 생성하는 모습이다.

var header = document.createElement('h2');
// createElement는 element를 만들어내는 속성이다.
var textNode = document.createTextNode('Hello DOM');
// createTextNode는 선택한 요소에 문자열을 넣어주는 속성이다.
header.appendChild(textnode);
// appendChild는 선택한 요소에 자식요소를 추가하는 속성이다.
profile
와니완의 월드와이드와니웹🐥

0개의 댓글