[JS] DOM 트리구조

웹 브라우저의 구조

웹 브라우저의 동작 구조

Window 객체

 window 객체는 루트 객체로 최상단에 위치하며 브라우저 창을 대변합니다. window 객체는 다음과 같은 기능을 합니다.

• 자바스크립트 코드의 전역 객체로 자바스크립트 코드 어디서나 접근이 가능합니다.
• 브러우저 창을 대변하고, 이를 제어할 수 있는 기능을 제공합니다.
  (프로퍼티나 메소드 모두 전역 객체 내부의 것이기 때문에 window.을 생략 할 수 있습니다.)

 

DOM 트리구조

DOM은 노드 객체의 계층적인 구조로 구성되는데 이러한 계층 구조를 나무에 비유해 DOM 트리라고 합니다.

 

DOM (Document Object Model)

DOM은 한국어로 문서 객체 모델로 웹 페이지 내의 모든 콘텐츠를 객체로 표현한 것입니다. 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. 

 

• DOM 노드의 기능
  • document 객체는 페이지의 진입점 역할을 합니다.
  • document 객체를 이용해 원하는 태그를 생성할 수 있습니다.
  • document 객체를 이용해 원하는 페이지 내의 무엇이든 변경, 삭제할 수 있습니다.
• 주요 노드 객체
  • 문서노드(document node) : 최상위 노드(=루트 노드), document를 가리킨다
  • 요소노드(element node) : HTML요소를 가리키는 객체
  • 어트리뷰트노드(attribute node) : HTML요소의 어트리뷰트(속성)를 가리키는 객체
  • 텍스트노드(text node) : HTML요소의 텍스트를 가리키는 객체