Javascript DOM 기능, DOM 객체종류 알아보기 [자바스크립트 도장깨기]

목차

DOM

(Document Object Model : 객체지향)

노드, 스타일, 속성, 이벤트, 위치 및 크기를 다룰 수 있는 다양한 기능이다.

웹페이지를 구성하는 요소를 조작하기 위한 기능의 라이브러리, 트리구조

 

기능 

• 웹페이지에서 홍보용 이미지를 서로 상호작용하여 보여주는 슬라이더 기능
• 메뉴에 마우스 작업시 부드러운 애니메이션으로 열리는 기능
• 서버에서 데이터를 받아 화면에 출력하는 기능
• 웹페이지의 디자인(글꼴, 색)등을 변경하는 기능

 

처리순서 & 생성순서

1. 브라우저가 웹페이지의 코드를 읽어온다.
2. 파싱(parsing, 구문을 분석)단계를 거체 웹페이지 내용을 해석하는데, 이때 마크업 태그와 DOM클래스가 매칭되어 객체를 생성한다.
3. 웹 브라우저는 생성한 DOM 객체로 웹페이지 화면을 구성한다.

최상위 객체 생성후 이후 생성되는 객체는 자식개체로 만들어진다.

 

 

 

DOM 객체 

객체	설명
Node	노드를 다루는 기본 기능(메서드)과 프로퍼티(속성)를 제공, 기본데이터형 노드 객체는 노드를 탐색하고 조작시 사용
Document	트리의 최상위 객체 Text 노드. Element 노드, Atrtibute 노드에 접근의 시작점
HTMLDocumet	Document 객체를 확장하여 HTML용 메서드와 프로퍼티를 추가한 객체 = body
Element	HTML 문서의 요소를 구조를 표현 속성과 이벤트를 제어할 경우 사용
HTMLElement	Element 객체를 상속받은 HTML태그 요소 전용의 메서드와 프로퍼티를 제공 = id, className, style 등
Attribute	HTML 요소의 속성
Text	텍스트를 다루는 기능

 

노드(Node)

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

HTML페이지의 태그뿐만 아니라 주석, 텍스트도 포함한 모든 요소를 말한다.

부모, 형제, 자식 노드에 접근 또는 추가, 삭제 가능하다.

 

Document

Elements노드와 이벤트, 속성, 텍스트 노드등 노드를 생성하는 시작점이다.

자주 사용 할 id, className, tagName으로 특정 노드를 찾고, 이벤트를 등록시키는 가능을 갖춘 객체이다.

 

HTMLDocument

HTML전용 Document 객체이다

body와 같은 HTML 문서 전용 메서드와 프로퍼티가 포함되어 페이지 로딩 후 html, head, body객체를 비롯하여 페이지에 작성된 태그와 1:1 매칭되는 모든 노드객체를 가지고 있는 객체이다.

 

Element

주석노드, 텍스트노드를제외한 나머지 노드를 말한다.

노드객체의 자식으로 노드객체의 기능을 사용할 수 있다.

태그 이름이 담긴 프로퍼티와 속성을 알아 설정하는 기능과 이벤트를 추가, 삭제, 발생시키는 기능이 있다.

 

HTMLElement

HTML문서에 있는 노드를 통합해서 부르는 말

자주 사용할 id, className프로퍼티가 정의되어 있다.