소년코딩의 자바스크립트 강좌 38. DOM이란?
2016. 10. 2. 13:04DOM: Document Object Model (문서 객체 모델)
DOM은 HTML과 XML문서에 대한 어플리케이션 프로그래밍 인터페이스다.
HTML 페이지에서 html, body, div, span등을 태그라 한다.
DOM은 문서의 태그를 노드의 계층 구조트리로 표현하며, 이를 통해 페이지의 각 부분을 추가, 제거, 수정할 수 있다.
현재 최신IE, Chrome, Safari, Opera, Firefox등은 모두 DOM을 정확히 구현했다.
노드의 트리 구조
HTML과 XML문서는 모두 DOM을 통해 노드의 트리 구조로 표현이 가능하다.
노드 타입은 여러 가지가있으며, 각 타입은 문서에서 서로 다른 정보나 마크업을 표현한다.
각 노드 타입은 서로 다른 특징, 데이터, 메서드를 가지면 각 노드는 다른 노드와 관계가 있다.
이러한 관계가 트리 구조를 생성하고 마크업은 이 관계를 통해 특정 노드에 뿌리(root)를 둔 트리구로 표현한다.
위 그림에서 문서(Document) 노드는 각 문서를 루트로 표현한다.
문서 노드의 자식은 <html>요소 하나 뿐인데 이를 '문서 요소'라고 한다.
- 문서 요소는 문서의 최상위 요소이며, 다른 요소는 모두 이 안에 존재한다.
- 문서 하나에 문서 요소 하나만 있을 수 있다.
- HTML 페이지에서 문서 요소는 항상 <html>요소이다.
by 소년코딩
추천은 글쓴이에게 큰 도움이 됩니다.
악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.
'자바스크립트 이야기 > 기본 강좌' 카테고리의 다른 글
| 소년코딩의 자바스크립트 강좌 40. DOM: Document 타입 (0) | 2016.10.09 |
|---|---|
| 소년코딩의 자바스크립트 강좌 39. DOM: Node 인터페이스 (0) | 2016.10.09 |
| 소년코딩의 자바스크립트 강좌 37. 즉시 실행 함수를 이용한 블록 스코프 (0) | 2016.09.27 |
| 소년코딩의 자바스크립트 강좌 36. map, wrapper (0) | 2016.09.27 |
| 소년코딩의 자바스크립트 강좌 35. each (0) | 2016.09.27 |
댓글 로드 중…
