DOM (문서 객체 모델:Document object model)
XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스(API)이다. DOM은 전체 페이지를 노드의 계층 구조로 변환한다.
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>이 코드는 DOM을 통해서 노드의 계층 구조인 다이어그램으로 나타낼 수 있다.
문서 '트리'하고 하는
HTML-head - title - Sample Page
HTML-body -p -Hello World!
DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정할 수 있다. DOM API를 통해서 노드를 쉽게 제거하고, 교체하고, 수정할 수 있다.
노드의 계층 구조
HTML과 XML 문서는 모두 DOM을 통해 노드의 계층 구조로 표현이 가능하다.
노드 타입에는 여러가지가 있고, 각 타입은 문서에서 서로 다른 정보나 마크업을 표현한다. 각 노드 타입은 서로 다른 특징, 데이터, 메서드를 가지고 각 노드는 다른 노드와 관계가 있을 수 있다. 이런 관계로 인해서 계층 구조를 생성하고 마크업은 이 관계를 통해 특정 노드에 뿌리(root)를 둔 트리 구조로 표현이 가능한 것!
문서 노드는 각 문서를 루트로 표현한다.
문서 노드의 자식은 html 요소 하나뿐인데 이를 '문서요소'라고 부른다. 문서요소는 문서의 최상위 요소이고 다른 요소들은 모두 이 안에 존재한다. 문서요소는 문서하나에 하나만 있을 수 있다.
- 총 12가지 노트 타입이 있고 모든 노드는 기반(base)타입을 상속한다.
노드타입은 기초를 쌓은 뒤에 더 파고들자.
노드 사이의 관계
문서트리를 가족 계보처럼 설명할 수 있다. HTML에서 body요소는 html요소의 자식이고 html요소는 body요소의 부모이다. head요소는 body요소의 형제로 간주하는데, 두 요소가 같은 html 요소를 부모로 공유하기 때문이다.
각 노드에는 childNodes 프로퍼티가 있다. 이 프로퍼티에는 NodeList가 저장 된다. NodeList는 배열 비슷한 객체인데 노드를 순서 있는 목록으로 저장하여 위치기반으로 접근할 수 있다. 그리고 NodeList는 length 프로퍼티가 있지만 계속해서 바뀌므로 "살아 있는 객체"라고 불린다.
지금 시점에서 깊이 파고들지 않아도 될 것 같다.
알아만 두자.
