1. 문서 객체 모델
1) 문서 객체 모델(DOM; Document Object Model)
- 웹 브라우저가 HTML 문서를 인식하는 방식
- 좁은 의미로는 JavaScript에서 document 객체와 관련된 객체의 집합
- 브라우저는 HTML 문서의 내용을 해석해서 DOM 트리를 구축하고 DOM에 있는 내용이 브라우저 화면에 표시된다.
스타일시트나 JavaScript 프로그램에서 내용을 조작하는 것은 DOM에 포함된 내용을 조작하는 것이고 DOM에 포함 된 내용을 조작하면 브라우저 화면에 표시되는 내용이 바뀐다.
2) HTML DOM에서 모든 것은 노드(node)이다.
- HTML 문서는 문서 노드(document node)
- HTML 요소는 요소 노드(element node)
- HTML 속성은 속성 노드(attribute node)
- HTML 요소 안의 텍스트는 텍스트 노드(text node)
- 주석은 주석 노드(comment node)
2. Document, Element 객체
1) Document 객체
- HTML 문서에서 최상위 노드
- 웹 브라우저는 HTML 문서를 읽어 들여서 Document 객체로 생성
- Document 객체는 HTML 문서에 포함된 모든 노드를 포함
2) Element 객체
- DOM에서 HTML 요소, 즉 요소 노드는 Element 객체로 표현
- Element 객체는 자식 노드를 가질 수 있다.
3) window 객체 vs document 객체 vs Element 객체
- window 객체: 브라우저(browser)를 표현하는 객체
- document 객체: 문서(document)를 표현하는 객체
- Element 객체: HTML 요소(element)를 표현하는 객체
3. HTML 문서의 조작
- Document 객체와 Element 객체를 통해 HTML 문서를 조작
- 탐색(찾기)
- 참조(읽어오기)
- 수정(고치기)
- 추가(끼워 넣기)
- 생성(새로 만들기)
- 삭제(지우기)
4. document 객체의 속성
5. document 객체의 HTML 요소 탐색 메서드
JavaScript에서 제공하는 메서드(함수) 중에서 가장 부담이 큰 것은 바로 이 탐색 관련 메서드이다,
따라서 가능하면 탐색을 적게 하는 것이 좋다!
6. document 객체의 나머지 메서드
