자바스크립트 DOM

DOM 이란?

- 웹 페이지 자체를 손수 편집하지 않고 웹 브라우저에 표시된 상태에서 웹 페이지의 특정부분을 동적으로 지우거나 

   다른 내용으로 변경하거나, 또는 글자 색과 글자크기를 바꾸고 싶을때 DOM 기능을 활용하게 됩니다.

핵심 DOM 객체소개

Node 객체

- DOM 객체 가운데 가장 최상위 객체이자 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메소드가 정의돼 있

  는 Node 인터페이스를 구현한 객체입니다.

- Node 객체에서 제공하는 기능을 이용하면 노드타입을 파악하거나 부모, 형제, 그리고 자식노드를 알아내서 접

  근하거나, 자식노드를 추가, 삭제, 교체할 수 있습니다.

Element 객체

- Node 객체의 자식이므로 Node 객체가 가지고 있는 기능을 모두 사용할 수 있고, HTML과XML의 태그 노드를 

  조작하기 위한 기본적인 프로퍼티와 메서드가 포함돼 있습니다.

- 태그 기능이 담긴 프로퍼티와 속성을 알아내고 설정하는 기능과 이벤트를 추가하거나 삭제하거나 발생시키는

  기능을 합니다.

HTMLElement 객체

- Element 객체의 기능 외에도 오직 HTML 페이지의 p, div 태그와 같은 HTML 태그에서만 쓸 수있는  속성과 기

  기능이 포함돼 있습니다.

- HTMLDivElement, HTMLImageElement, HTMLBodyElement와 같은 객체의 부모객체이기도 합니다.

Document 객체

- HTML문서와 XML문서의 루트 객체로서 앨리먼트 노드와 이벤트. 속성노드, 텍스트 노드, 주석 노드까지 생성

  하는 팩토리 기능 

- id, className, tagName으로 특정노드를 찾는 기능

- 이벤트를 발생시키고 등록시키는 이벤트 등록 모델 기능

HTMLDocument 객체

- HTML 문서 전용 Document 객체입니다. 이에 따라 body와 같은 HTML 문서전용 프로퍼티와 메서드가 

   포함돼 있습니다.

- HTML 페이지 로딩 후 파싱단계에서 만들어진 html, head, body 객체를 비롯해  페이지에 작성된 태그와

   일대일로 매칭되는 모든  Node 객체를 가지고 있는 객체입니다.

Text 객체

- Node 객체의 하위 객체이며 텍스트 노드를 조작하는 기능이 포함돼 있습니다.

- 텍스트노드는 일반적으로 엘리먼트 노드의 자식노드로 존재하므로 Text 객체 역시 Element 객체의 자식 객체

   로 존재합니다.

Attribute 객체

- Node 객체의 하위 객체이며  태그의 속성 정보를 조작하는 기본 프로퍼티와 메서드가 포함돼 있습니다.

- Attribute 객체에 접근하려면 먼저 Element 객체의 프로퍼티 가운데 attribute가 어떤 객체의 인스턴스인지

   알아야 합니다.

- attributes 의 프로퍼티 객체타입은 NamedNodeMap 객체의 인스턴스로서  일종의 NodeList와 같은 

   컬렉션 객체입니다.

- 태그에 설정돼 있는 속성과 일대일 매칭되는 Attribute 객체의 인스턴스를 요소로 가지고 있습니다.