jQuery완전정복(자바스크립트DOM)

DOM이란?

-웹화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리

-제이쿼리 DOM과 자바스크립트 DOM 모두 동일한 의미

​

DOM 구조

-DOM은 정의부분(명세서)과 구현부분으로 나뉨

-정의 부분: 웹페이지(또는 XML)문서를 조작할 때 지켜야 할 약속(규칙,규약)이 명시되어 있는 문서, 실제 동작하는 구현 소스코드는 존재하지 않음(웹표준을 정의는 협회 W3C에서 한다)

-구현부분: 브라우저 내부에 존재, 브라우저업체는 저마다의 기술력을 바탕으로 텅빈 DOM 내부를 채워 실제 동작하는 DOM기능을 구현

​

IDL이란?

-IDL(Interface Definition Language)은 DOM의 정의부분을 만들 때 사용하는 인터페이스 정의 전용언어

-DOM문서는 인터페이스 정의 문서(IDL)로 작성되어있다.

​

DOM과 HTML페이지와의 관계

1.웹페이지 읽기 : 먼저 브라우저는 HTML페이지를 읽습니다.

2.파싱 단계 : 이어서 파싱(parsing)단계를 거쳐 웹페이지 내용을 해석, 마크업 태그와 1:1매칭이 되는DOM클래스의 객체를 생성, 이렇게 생성된 객체는 저마다의 고유 기능을 하게 됨

3.출력 : 마지막으로 웹브라우저는 생성한 DOM객체를 가지고 웹페이지 화면을 만들게 됨

​

DOM과 노드와의 관계

-노드는 HTML웹페이지 구성요소의 가장 작은 단위

-웹브라우저는 가장먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성, 이후 생성하는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체

-일종의 트리 구조를 갖추게 됨

 

Node객체

-노드: 문서를 이루는 모든 요소를 통합해서 부르는 용어

-Node객체 : 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메서드가 정의돼 있는 Node 인터페이스를 구현한 객체

​

Element객체

-Element는 노드중 주석노드와 텍스트노드를 제외한 나머지 노드를 통합해서 부르는 용어

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

​

HTMLElement객체

-HTMLElement는 오직 HTML문서에만 있는 노드를 통합해서 부르는 말이다.

-HTMLElement객체에는 Element객체의 기능외에도 오직 HTML 페이지의 p,div 태그와 같은 HTML 태그에서만 쓸수있는 공통적인 속성과 기능이 포함, id와 className 프로퍼티가 정의

-HTMLElement객체는 HTMLDivElement, HTMLImageElement와 같은 객체의 부모객체이기도 함

​

Document객체

-Document객체 역시 Node객체의 하위 객체이며 HTML문서와 XML문서의 루트 객체로서 엘리먼트노드와 이벤트, 속성 노드,텍스트 노드, 주석등의 노드를 생성하는 팩토리 기능

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

-이벤트를 발생시키고 등록시키는 이벤트 모델 기능까지 갖춘 아주 중요한 객체

​

HTMLDocument객체

-HTMLDocument객체는 HTML문서 전용 Document객체

-body와 같은 HTML문서 전용 프로퍼티와 메서드 포함

-HTMLDocument 객체에는 HTML 페이지 로딩후 파싱 단계에서 만들어진 html, head, body 객체를 비롯해 페이지에서 작성된 태그와 일대일로 매칭되는 모든 Node 객체를 가지고 있는 객체