4.1 자바스크립트 DOM

jQuery는 자바스크립트로 만들어진 라이브러리입니다. DOM 작업을 쉽게 할 수 있는 기능을 가지고 있습니다.

 

자바스크립트 4가지 요소

 

-자바스크립트 Core 문법

기본 문법과 구조

데이터 타입

조건문

반복문

함수

클래스.......

 

-자바스크립트 Core 라이브러리

타이머 함수

문자열

날짜및 시간

수학

배열 ......

 

- 자바스크립트 BOM(Browser Object Model)

Window

Navigator

Location

History

Document

Screan 객체들

 

- 자바스크립트 DOM(Document Object Model)

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

 

여기서 jQuery는 "자바스크립트 DOM" 부분을 쉽게 사용할 수 있게 도와주는 라이브러리가 됩니다.

 

$("#menu li").css("color","#foo"); //jQuery 코드 이 안 함수의 내용을 자바스크립트 DOM으로 가득차 있습니다,

 

////////////////////////////////////////////////////////////////////////////////////////

//#menu 노드 찾기

var menu = document.getElementById("menu");

//li 리스트 구하기

var liList = menu.getElementByTagName("li");

//li 개수만큼 루프 돌며 스타일 변경

for(var i = 0 ;  i < liList.length; i++){

  // n번째 li 접근

  var li = liList[i];

  // 스타일 변경

  li.style.color = "#foo";

}

//자바스크립트 DOM기능을 사용한 부분

//document.getElementById -> 아이디로 요소 찾기

//menu.getElementByTagName -> 태그이름으로 특정 요소의 자식 요소 찾기

// li.style.color ->요소의 스타일 속성값 변경

/////////////////////////////////////////////////////////////////////////////////////

여기서 알수 있는 것은 jQuery 의 실제 모든 작업은

jQuery내부에 있는 자바스크립트DOM에서 처리를 한다는 사실입니다.

 

DOM

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

정의 부분(문서를 조작할 때 지켜야 할 약속) + 구현 부분(실제 동작하는 부분)

 

W3C DOM vs 브라우저 DOM

W3C는 동작되는 구현 소스 코드는 전혀 없습니다. 단지 지켜야 하는 약속들만 있습니다.

 

웹 브라우저들은 고유 기술을 이용하여 DOM 인터페이스를 구현합니다.

 

이벤트를 등록하는 기능은 addEventListener()라는 메서드에 구현 되어야 하는데 IE7 같은 경우는 attachEvent()를 이용해 등록하기 때문에 웹 표준을 지원하지 않는 브라우저라고 부르게 됩니다.

이는 W3C에서 작성한 규칙대로 이벤트 기능을 구현한 경우 웹 표준을 지원한다고 할 수 있습니다.

 

IDL(Interface Definition Language) 

DOM의 정의 부분을 만들 때 사용하는 인터페이스 정의 전용 언어입니다.

즉, 프로그래밍 언어 중 하나이며 고유의 문법이 있습니다. 

 

DOM과 HTML 페이지와의 관계

 

1. HTML 페이지 로딩

 브라우저는 HTML 페이지를 읽습니다.

 

2. 파싱단계를 거쳐 웹페이지에 작성된 태그와 1:1 매칭되는 DOM객체 생성

  파싱 단계를 거쳐 웹 페이지 내용을 해석하게 되는데 이때 여러분이 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스의 객체를 생성합니다. 이렇게 생성된 객체는 저마다의 고유 기능을 하게 됩니다.

 

3. 브라우저 화면에 출력

 웹 브라우저는 생성한 DOM 객체를 가지고 여러분이 보고 있는 웹페이지 화면을 만들게 됩니다.

 

파싱 단계

<div>를 만나게 되면 HTMLDivElement라는 클래스의 인스턴스(객체)를 생성하고

<img> 태그를 만나면 HTMLImageElement 클래스의 인스턴스를 생성한다는 의미입니다.

 

var $target = $("#target"); //jQuery 구문을 만들어 #target라는 노드를 찾아 사용합니다.

// 브라우저가 파싱 단계에서 만들어 DOM 객체 중 #target이라는 이름을 가진 DOM 객체에 접근하는 의미

 

DOM과 노드의 관계

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

<p> 태그 뿐 아니라 주석과 텍스트까지도 모두 노드에 해당합니다.

노드에 관한 그림은 다음과 같습니다.

HTML 코드의 DOM과 노드의 관계

XML코드 역시 다르지 않습니다.

XML 코드의 DOM과 노드의 관계

 

노드(Node)

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

 

Node 객체

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

노드 타입을 파악하거나 부모, 형제 그리고 자식 노드를 알아내서 접근 또는 자식 노드를 추가, 삭제, 교체할 수 있습니다.

 

Element

노드 중 주석 노드와 텍스트 노드를 제외한 나머지 노드

 

Element 객체

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

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

- 이벤트와 관련된 기능

- Node의 객체기능을 상속 받기 때문에 Node + Element 모두 이용가능합니다.

 

HTMLElement

오직 HTML 문서에만 있는 노드를 통합해서 부르는 말, XML 코드와는 상관이 없게 됩니다.

 

HTMLElement 객체

Node + Element 객체를 모두 상속 받음

- ID, className 속성

- 오프셋 위치와 관련된 속성

- 마우스 이벤트와 관련된 기능

- 키보드 이벤트와 관련된 기능

 

Document 객체

Node 객체를 상속받음

- 각 노드를 생성할 수 있는 기능

- 이벤트를 생성할 수 있는 기능

- id, tagName으로 특정 노드를 찾을 수 있는 기능

- 이벤트 모델 기능

 

HTMLDocument 객체

HTML 문서 전용 Document 객체입니다. body와 같은 HTML 문서 전용 프로퍼티와 메서드가 포함돼 있습니다.

 

위의 객체들에 대한 것들을 그림으로 한눈에 볼 수 있게 정리된 것입니다.

DOM 객체의 주요기능 정리