자바스크립트 문서 객체 모델(DOM)
DOM과 jQuery와의 관계
- jQuery란 자바스크립트로 만들어진 라이브러리이다. 자바스크립트의 DOM(Document Object Model)작업을 쉽게 할 수 있게 해 준다.
- 자바스크립트를 배운다는 것은
- 자바스크립트 core 문법 : 기본 문법과 구조, 데이터 타입, 조건문, 반복문, 함수, 클래스 등
- 자바스크립트 core 라이브러리 : 자바스크립트에서 기본으로 제공되는 타이머 함수, 문자열, 날짜 및 시간, 수학, 배열, 기타 전역함수 등이 포함
- 자바스크립트 DOM (Document Object Model) : 노트, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능을 포함
- 자바스크립트 BOM (Browser Object Model) : 브라우저와 관련된 Window, Navigator, Locatoin, History, Document, Screen 객체들을 포함
- 자바스크립트와 jQuery와의 관계
- jQuery는 간단히 말해 자바스크립트 요소 중 실무에 가장 많이 사용하는 자바스크립트 DOM 작업을 좀 더 쉽게 처리할 수 있도록 도와주는 라이브러리이다.
- jQuery는 단순한 자바스크립트 DOM 작업을 도와주는 라이브러리일 뿐, 새로운 JS 문법이나 프로그래밍 언어가 아니다.
DOM의 이해와 기능
-
DOM : 웹 화면에 보이는 요소를 조작하기 위한 기능이 모인 라이브러리 덩어리를 의미한다.
-
우리가 사용하는 마크업 태그인 <a>, <p>, <div> 들이 웹페이지를 구성하는 DOM 객체로 생성된다.
-
DOM의 기능
1. 서버에서 데이터를 받아 화면에 출력하는 기능
2. 웹페이지 화면에서 발생하는 여러 동작 및 기능들을 구현 -
DOM의 구조
- W3C DOM과 브라우저 DOM
- DOM은 정의 부분(명세서)와 구현 부분으로 나뉘어진다. 정의 부분인 명세서에는 웹페이지(또는 XML)문서를 조작할 때 지켜야 할 약속 (규칙, 규약)이 명시되어 있는 문서일 뿐, 실제도 동작하는 구현 소스코드는 전혀 존재하지 않는다.
- 즉, 함수 이름만 있고 함수 내부에 있어야 할 구현 코드가 없는 것과 동일하다.
- 이러한 명세서를 만드는 곳이 W3C 협회이다.
- 구현 부분은 브라우저 내부에 존재하고, 각 브라우저 업체(IE, Chrome, Firefox, Safari 등)는 빈 문서로 된 DOM 내부를 채워서 실제 동작하는 DOM 기능을 구현한다.
- DOM은 트리
- W3C DOM과 브라우저 DOM
-
IDL(Interface Definition Language : 인터페이스 정의 언어)
- DOM의 정의 부분을 만들때 사용하는 인터페이스 정의 전용 언어이다.
- 선언만 있고 실제 동작하는 코드는 없으며, 브라우저 업체에서 약속에 따라 구현 소스코드를 만들고 웹페이지가 동작하게 한다.
DOM과 HTML 페이지와의 관계
- DOM과 HTML 페이지와의 관계
- 해당 브라우저는 웹페이지 코드들을 읽어들인다.
- 이어서 파싱(parsing) 단계를 거쳐 웹페이지 내용을 해석한다. 이때, 우리가 작성한 마크업 태그와 1:1매칭이 되는 DOM 클래스의 객체를 생성한다. 이렇게 생성된 객체는 저마다의 고유 기능을 하게 된다.
- 마지막으로 웹브라우저는 생성한 DOM 객체로 웹페이지 화면을 만든다.
ex) 웹브라우저가 파싱 단계에서 <div>를 만나면, HTMLDivElement 클래스의 인스턴스가 생성되고, <img> 태그를 만나면 HTMLImageElement 클래스의 인스턴스를 생성한다. 이같이 생성된 인스턴스들을 개발자들이 접근하여 사용하게 된다.
- DOM과 노드와의 관계
- 노드는 HTML 웹페이지 구성요소의 가장 작은 단위이다.
- HTML 페이지의 <body>, <div>, <p> 등의 태그 뿐만 아니라 텍스트 및 주석까지 모두 노드라고 부른다.
- 웹브라우저는 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성하고, 이후 생성되는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들어진다.
따라서 아래와 같은 트리 구조를 형성하게 된다. - ex)
핵심 DOM 객체
-
노드 : 노드 객체에는 노드를 다루는 기본 기능 및 프로퍼티를 제공한다. 노드 탐색 및 조작에 사용된다.
-
Document : 텍스트, 엘리먼트, 속성 노드를 생성할 때 사용한다. 노드를 생성하는 팩토리 메서드로 구성되어 있다.
-
Element : HTML, XML 태그 요소의 기본 기능과 프로퍼티를 제공한다. 속성과 이벤트를 제어할 때 사용한다.
-
HTMLDocument : Document 객체를 확장하여 HTML용 프로퍼티와 메서드를 추가한 객체이다. body가 해당 객체의 프로퍼티다.
-
HTMLElement : Element 객체를 상속받은 HTML 태그 요소 전용으로 HTML 태그 요소의 기본 기능과 프로퍼티를 제공하며, id, className, style 등이 이 객체에 존재한다.
-
Text : 텍스트를 다루는 기능
-
Attribute : 속성을 다루는 기능
- 노드 객체
- 문서를 이루는 모든 요소
- 노드객체는 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메서드가 정의되어 있는 Node 인터페이스를 구현한 객체이다.
- 노드 객체에서 제공하는 기능을 사용하여 노드 타입을 파악하거나 부모, 형제, 자식 노드를 알아내어 접근 및 자식 노드를 추가, 삭제, 교체할 수 있다.
- 노드 객체는 DOM 객체 가운데 가장 최상위 객체이자 모든 하위 노드들이 상속받는 객체이다.
- Element 객체
- 주석 노드와 텍스트 노드를 제외한 나머지 노드를 통합해서 부르는 용어이다.
- Element 객체 역시 노드의 한 종류이며 Element 인터페이스를 구현한 객체이다.
- Element 객체는 Node 객체의 자식이므로 Node 객체의 모든 기능을 사용할 수 있다.
- Element 객체의 주요 기능은 태그 이름이 담긴 프로퍼티와 속성을 알아내고 설정하는 기능과 이벤트를 추가하거나 삭제하거나 발생시키는 기능이 있다.
- HTMLElement 객체
- HTMLElement 객체는 오직 HTML에만 있는 노드를 통합해서 부르는 말이다.
- HTMLElement 객체에는 Element 객체의 기능 외에도 오직 HTML 페이지의 p, div 태그와 같은 HTML에서만 쓸 수 있는 공통적인 속성과 기능이 포함되어 있다.
- id와 className 과 같은 프로퍼티가 정의되어 있다.
- Document 객체
- Element 노드와 이벤트, 속성 노드, 텍스트 노드 등의 노드를 생성하는 팩토리 기능이 있다.
- id, className, tagName 등으로 특정 노드를 찾는 기능, 이벤트를 등록시키고 이벤트 모델 기능을 갖춘 중요한 객체이다.
- HTMLDocument 객체
- HTML문서 전용 Document 객체이다.
- body와 같은 HTML 문서 전용 프로퍼티와 메서드가 포함되어 있다.
- HTML 페이지 로딩 후 파싱 단계에서 만들어진 html, head, body 객체를 비롯하여 페이지에 작성된 태그와 1:1로 매칭되는 모든 노드 객체를 가지고 있는 객체이다.
