자바스크립트 DOM 이란

DOM(Document Object Model)

자바스크립트를 세분화하자면 4가지 요소로 구성되어 있습니다.

자바스크립트 Core 문법	기본 문법과 구조, 데이터타입, 조건문, 반복문, 함수, 객체, 클래스(프로토타입)등이 포함되어 있습니다
자바스크립트 Core 라이브러리	자바스크립트에서 기본으로 제공하는 문자열(String),Date, Math, Array,Number, 타이머함수를 비롯한 기타 전역함수등이 포함되어 있습니다.
자바스크립트 DOM (Document Object Model)	노드(node), 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있습니다.
자바스크립트 BOM (Browser Object Model)	브라우저와 관련된 Window, Navagator, Location, History, Document, Screen 객체들이 포함되어 있습니다.

DOM 이란 브라우저 화면에 보이는 요소를 조작하기 위한 기능으로 가득 차있는 각각의 라이브러리 덩어리입니다.

(일반적으로 자바스크립트 DOM 이나 DOM 은 같은 의미로 사용됩니다.)

DOM 에서 제공하는 일반적인 기능은 위의 이미지처럼 여러 개의 DOM 객체로 나누어 구성되어 있습니다.

좀 더 자세하게 살펴보도록 하겠습니다.

D : Document (문서)

문서 객체 모델은 문서가 없으면 동작하지 않습니다.

웹에서 사용할 문서를 만들어 웹 브라우저에 출력하는 순간 DOM 이 살아 움직이기 시작하는 것입니다.

그리고 이것은 작성된 웹 문서가 객체로 변경되기 때문에 가능한 것입니다.

O : Object (객체)

자바스크립트에는 세 종류의 객체로 나눌 수 있습니다.

1.사용자 정의 객체

2.배열,수학,날짜와 같이 자바스크립트에서 이미 만들어진 내장 객체

3.웹 브라우저가 제공하는 주요 객체

자바스크립트 초기에는 중요한 몇가지 주요 객체들이 스크립트 제작에 사용되었으며, 그 중 가장 기본적인 것이 윈도우 객체(window object)입니다.

이러한 객체는 웹 브라우저 창 내부의 속성을 표현한 것으로 브라우저 객체모델(BOM, Browser Object Model) 이라고도 불립니다.

브라우저 객체 모델은 예를 들어, window.open 이나 window.blur 같은 것을 말합니다.(이러한 내용은 DOM의 내용에서 벗어난 주제입니다.)

DOM은 브라우저 창 안의 웹문서 내용을 다루는 문서(document) 객체가 대상입니다.

BOM -> 브라우저 창 안의 속성

DOM -> 브라우저 창 안의 웹문서 내용을 말합니다.

M: Model (모델)

DOM에서 사용하는 가장 중요한 규칙은 문서를 나뭇가지(tree)형 구조로 표시하는 것입니다.

이러한 구조도는 (X)HTML에서 문서를 가장 잘 표현하는 방법입니다.

<html>은 모든 요소의 부모이며 <head>와 <body> 는 형제 관계를 이루고 있고 이런 식으로 부모/자식 관계를 맺어가는 것이 기본적인 document 구조입니다.

이러한 형태를 노드 트리라 부르고 있습니다.

node : 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시하는것을 말하며 네트워크는 노드의 집합을 뜻합니다.

현실 세계에서 모든 것은 원자로 구성되어 있고, 원자는 세상의 노드라고 할 수 있으며 원자보다 작은 양성자나 전자 등도 노드라고 부를수 있습니다.

마찬가지로 DOM 또한 문서는 노드의 집합이며, 문서라는 나무 위에 가지나 잎 같은 노드를 갖고 있는 것이라 할 수 있습니다.

Jaehee's WebClub

Web Club