오늘은 html DOM에 대하여 알아보도록 하겠습니다.

개요

HTML 페이지가 브라우저에 로드되면 자바스크립트는 브라우저로부터 3가지의 유형 객체를 제공받습니다.

객체 설명

CORE 객체와 HTML DOM 객체, 그리고 BOM 객체입니다.

CORE 객체는 브라우저의 종류나 HTML 페이지의 구조에 상관없이 자바스크립트에서 항상 사용되는 기본적 객체입니다.

HTML DOM 객체는 웹 페이지에 작성된 태그 별로 DOM 객체를 생성합니다. 태그들의 객체를 HTML 문서의 각 요소를 객체화했다는 의미로 HTML DOM이라고 칭합니다.

html DOM은 표준이여서 모든 브라우저에서 호환됩니다.

BOM은 브라우저 객체 모델로서, 브라우저에 관한 정보를 제공하고, 브라우저의 모양을 제어하도록 제공되는 객체입니다.

HTML DOM

HTML DOM의 목적은 HTML 페이지에 작성된 각 태그를 객체로 만든 것으로서 DOM 객체를 통해 HTML 태그를 제어하기 위해 존재합니다.

DOM 트리

브라우저가 HTML 페이지를 불러오면서 태그들의 포함 관계에 따라 DOM 객체를 트리 구조로 만든 것 입니다.

태그마다 태그와 이름이 같은 하나의 DOM 객체를 생성히며, 태그의 포함 관계에 따라 DOM 객체들이 트리 내에서 부모 자식 관게의 계층 구조를 형성합니다.

자바스크립트는 DOM 트리를 따라 객체에 접근합니다.

DOM 트리의 특징으로는 DOM 트리의 루트는 document 객체지만, document 객체는 dom 객체가 아닙니다.

그리고 DOM 객체의 종류는 HTML 태그 종류만큼 있습니다.

• 브라우저가 HTML 태그를 화면이 출력하는 방법

1. 브라우저가 DOM 트리의 틀을 생성합니다.

2. 브라우저가 태그로부터 먼저 DOM 객체를 생성하고 DOM 트리를 구성합니다.

3. 브라우저가 DOM 객체를 화면에 출력합니다.

4. HTML 페이지는 불러진 뒤에 사라지고, 브라우저에는 DOM 객체와 트리만 존재합니다.

5. 자바스크립트로 DOM 객체를 제어하면 그에 따라 즞각 브라우저의 화면이 변경됩니다.

DOM 객체

DOM 트리의 한 노드를 DOM 객체라고 하며, 태그 하나에 하나의 DOM 객체를 생성합니다.

DOM 객체의 구성요소

DOM 객체는 5개의 요소로 이루어져있습니다.

1. Property

2. Method

3. Collection

4. Event listener

5. Style

family tree

모든 DOM 객체이며 표준에 따라 6개의 property를 가집니다.

1. parentElement property – 부모 객체

2. children property – 직계 자식들의 collection

3. firstElementChild – 첫 번째 직계자식

4. lastElementChild – 마지막 직계자식

5. previousElementSibling property – 왼쪽 sibling 객체

6. nextElementSibling property – 오른쪽 sibling 객체

다음편에서 계속됩니다.