What is DOM? DOM에 대해 이해하기 (2021.12.28)

What is DOM?

• Document Object Model (문서 객체 모델)의 약어
• BOM(Browser Object Model)이란 개념을 알아야 함
• BOM은 브라우저와 관련된 객체들의 집합
• BOM의 최상위 객체(object)는 window
• DOM은 window 객체의 하위 객체
• DOM은 표준 규약에서 제공하는 기능 외에도 많은 브라우저들은 추가적인 기능들을 제공한다.
• 그렇기에 사용자가 작성한 문서들이 각각 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있음을 인지한다.
• e.g.(exempli gratia, 예를들어 라틴어)
  표준 DOM 에서는 문서 안에서 모든elements에 대한 list를 리턴하는 getElementsByTagName method를 정의하고 있다.

var paragraphs = document.getElementsByTagName("P"); // paragraphs[0] is the first 
<p> element // paragraphs[1] is the second <p> element, etc. alert(paragraphs[0].nodeName);

• HTML 문서가 웹 브라우저에 로드되면 문서 객체가 됨
• 문서 객체(object)는 HTML 문서의 루트 노드이다.
• 문서 객체(object)는 window 객체의 속성이다.
• 문서 객체(object)는 window.document 또는 document를 통해 접근할 수 있다.
• DOM은 문서를 위한 프로그래밍 API이다.
• HTML의 TABLE을

<TABLE>
    <TBODY>
        <TR>
            <TD>Shady Grove</TD>
            <TD>Aeolian</TD>
        </TR>
        <TR>
            <TD>Over the River, Charlie</TD>
            <TD>Dorian</TD>
        </TR>
    </TBODY>
</TABLE>

• DOM은 아래와같이 나타낼 수 있다.

DOM representation of the example table(DOM의 예 table)