1. DOM(Document Object Model)

[ DOM Tree ]

DOM Tree는 네 종류의 노드로 구성된다.

  1. 문서 노드(Document Node)

    트리의 최상위에 존재하며 각각 Element, Attribute, Text 노드에 접근하려면 문서 노드를 통해야 한다.

  2. 요소 노드(Element Node)

    Element 노드는 HTML Element를 표현한다. HTML Element는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 Element 노드는 문서의 구조를 서술한다고 말 할 수 있다.

    Attribute, Text 노드에 접근하려면 먼저 Element 노드를 찾아 접근해야 한다. 모든 Element 노드는 Element별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다.

  3. 어트리뷰트 노드(Attribute Node)

    Attribute 노드는 HTML Element의 Attribute를 표현한다. Attribute노드는 해당 Attribute가 지정된 Element의 자식이 아니라 해당 Element의 일부로 표현된다. 따라서 해당 Element 노드를 찾아 접근하면 Attribute를 참조, 수정할 수 있다.

  4. 텍스트 노드(Text Node)

    Text노드는 HTML Element의 Text를 표현한다. Text 노드는 Element 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, Text노드는 DOM tree의 최종단이다.

[ DOM Tree의 객체 구성 ]

2. CSSOM(CSS Object Model)

[ DOM과 CSSOM의 차이점 ]

CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다.

CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할 때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸 수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될 때까지 콘텐츠를 렌더링 할 수 없습니다.

3. Render Tree