9. HTML DOM 개요

브라우저는 HTML 페이지를 로드할 때 각 태그를 하나의 객체로 만든다. 이 태그를 동적으로 제어하기 위해서 HTML DOM을 사용한다. 이를 이용해 HTML 태그가 출력된 모양과 컨텐츠를 제어한다. 즉, DOM 객체를 이용해 CSS3를 바꾸면 태그의 스타일을 동적 제어할 뿐만 아니라, DOM 각체를 통해 HTML 콘텐츠, 즉 텍스트나 이미지를 제어하는 것도 가능하다.

따라서, HTML DOM의 종류는 HTML 태그의 종류만큼 있다. 하지만 document 객체는 DOM 객체가 아니다.

즉, HTML 태그에서 확장되어 HTML DOM은 부모자식간의 속성과 객체에 대한 프로퍼티가 추가된다.

<p>태그로 예시를 보면,

    <p id="firstP" style="color:blue; background: yellow;" onclick="this.style.color=orange;">
    이것은 <span style="color: red;">문장입니다.</span>
    </p>
    <script>
        var p=document.getElementById("firstP");
        var text="p.id="+p.id+"\n";
        text+="p.tagName = "+p.tagName+"\n";
        text+="p.innerHTML = "+p.innerHTML+"\n";
        text+="p.style.color = "+p.style.color+"\n";
        text+="p.chlidElementCount = "+p.childElementCount+"\n";
        text+="p.onclick = "+p.onclick+"\n";
        text+="너비 = "+p.offsetWidth+"\n";
        text+="높이 = "+p.offsetHeight+"\n";
        alert(text);

다음과 같이 출력되는데, 이 때 빨갛게 칠해진 태그를 통해 id가 firstP인 태그의 DOM 객체를 찾아 접근한 것이다.