[jQuery] Dom&Node 관계 / Dom객체

자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용)

스터디 정리

JQuery란 자바스크립트 DOM 작업을 좀더 쉽게 처리할 수 있게 도와주는 라이브러리이다.  JQuery를 알기 위해선 자바스크립트 DOM을 먼저 학습해야 한다.

 

자바스크립트 DOM (Document Object Mode) : 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리이다.

노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있다.

 

1. W3C DOM vs 브라우저 DOM

DOM은 정의부분(명세서)와 구현부분으로 나누어 진다. 

정의 부분인 명세서에는 웹페이지(XML)문서를 조작할 때 지켜야 할 약속이 명시되어 있는 문서일뿐 실제 동작하는 구현 소스코드는 전혀 존재하지 않는다. 

이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C이다.

구현 부분은 브라우저 내부에 존재한다. 브라우저 업체는 저마다 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현한다.

 

1. DOM과 HTML 페이지의 관계

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

2)     파싱단계 : 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스의 객체를 생성한다. 이렇게 생성된 객체는 저마다의 고유 기능을 하게 된다.

(EX : 파싱단계에서 div 태그를 만나게 되면 HTMLDivElement 라는 클래스의 객체를 생성하고, img 태그를 만나게 되면 HTMLImageElement 클래스의 인스턴스를 생성)

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

 

 

정리하면 HTML 페이지에 작성하는 마크업은 웹브라우저에게 알려주는 일종의 DOM 클래스의 메타정보일 뿐이다. 브라우저는 이 마크업 태그와 1:1매칭되는 DOM클래스의 객체를 생성해 보관하고 있게 된다. 이렇게 만들어진 DOM 객체는 웹브라우전 사용 하는 것이 아니라, 화면의 요소를 다루기 위해 개발자가 웹브라우저가 가지고 있는 DOM객체에 접근해서 사용하게 된다.

 

var $targert = $(“#target”);

이 구문은 브라우저가 파싱 단계에서 만들어 가지고 있는 자바스크립트 DOM객체 중 $target이라는 이름을 가진 DOM 객체에 접근하는 의미와 같다.

 

2. DOM과 노드와의 관계

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

<p>, <div>와 같은 태그뿐 아니라 주석 까지 모두 노드에 해당

 

웹브라우저는 앞에서 살펴본 것처럼 이런 노드들로 가득 찬 웹페이지를 읽어 들여 해석한 후 각 노드에 1:1 대응하는 DOM 객체를 생성한다.

DOM 객체가 생성되는 순서를 자세히 살펴보면, 

웹브라우저는 가장 먼저 최상위 HTMLDocument 클래스의 객체를 생성하고 

이후 생성하는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만든다. 

 

1. 핵심 DOM 객체 소개

DOM은 하나의 객체가 아니라 여러 개의 DOM 객체로 구성돼 있으며 각자 고유의 책임과 기능을 가지고 있다.

 

2. Node 객체 

Node 란? 문서를 이루는 모든 요소를 통합해 부르는 용어 

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

 

노드객체에서 제공하는 기능 

-      노드타입을 알수 있는 속성

-      부모 노드에 접근할 수 있는 기능

-      형제 노드에 접근할 수 있는 기능

-      자식 노드에 접근할 수 있는 기능

-      자식 노드를 추가,삭제,교체할 수 있는기능

 

3. Element 객체

Element 란 ? 노드 중 주석 노드와 텍스트 노드를 제외한 나머지 노드를 통합해서 

부르는 용어

      Element객체에서 제공하는 기능

-      태그 이름을 알 수 있는 속성

-      속성 제거 및 속성값을 구하고, 설정할 수 있는 기능

-      이벤트를 추가하거나 삭제하거나 발생시키는등 이벤트와 관련된 기능 

-      Element 객체에는 node객체의 모든 기능을 모두 물려(상속) 받기 때문에 node객체 기능 + element 객체에 새롭게 추가된 기능까지 모두 이용할 수 있다.

-   HTML과 XML의 태그 노드를 조작하기 위한 기본적인 프로퍼티와 메서드가 포함돼 있다.

 

4. HTMLElement 객체

오직 HTML 문서에만 있는 노드를 통합해서 부르는 용어

HTML 태그에서만 쓸 수 있는 공톡적인 속성과 기능이 포함 돼 있다.

Id, className  프로퍼티가 정의 돼 있다.

HTMLElement 객체는 HTMLDiveElement , HTMLImageElement, HTMLBodyElement 와 같은 객체의 부모 객체

   

5. Document 객체

노드의 하위객체 이며 HTML 문서와 XML문서의 루트 객체로서 엘리먼트 노드와 이벤트, 속성 노드, 텍스트 노드, 주석 등의 노드를 생성하는 팩토리 기능, id, className, tagName으로 특정 노드를 찾는 기능, 여기에 이벤트를 발생시키고 등록시키는 이벤트 모델 기능까지 갖춘 객체

 

6. HTMLDocument 객체

HTML 문서 전용 Document 객체 

body와 html문서 전용 프로퍼티와 메서드가 포함 돼 있다.

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