[DOM] Javascript로 html을 조작해보자

DOM 어렵게 생각하지마

OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가 추가된 "B"OM은 웹 브라우저 자체를 객체로 표현하는 형식을 말한다. 이 둘의 객체들로부터 제공되는 DOM API, BOM API를 통해 JavaScript가 웹 페이지/브라우저를 쉽게 제어 및 조작할 수 있다.

 

DOM

HTML문서의 구조와 내용을 객체 타입으로 변환시켜 웹 페이지에 객체지향적 접근을 가능하게 했다. 날 것 그대로의 Document를 Object로 만들면(=DOM), 구조, 내용, 스타일의 요소들을 구조적으로 접근할 수 있게 된다.

DOM은 프로그래밍 언어와 독립적이다.
DOM의 구현은 어떠한 언어에서도 가능하다. DOM은 추상적인 모델이며, 자바스크립트로 언어화하여 페이지를 조작하거나, 파이썬에서 언어화하여 크롤링하여 사용하기도 한다.

DOM의 종류

CORE 돔: 모든 문서 타입을 위한 돔모델
HTML 돔: HTML문서를 조작하고 접근하는 표준화된 방법 모든 HTML요소는 HTML DOM을 통해 접근할 수 있다.
XML 돔: XML문서를 조작하고 모든 XML요소는 XML DOM을 통해 접근할 수 있다.

HTML에서 DOM의미
원본 HTML 문서를 객체화 시킴으로써 구조가 명확해지고 관리하기 수월해졌다.
웹 브라우저의 제작사별, 버전별, 플랫폼, 언어 차이에 의존하지 않고, 웹 페이지에 접근이 가능해졌다.

Javascript에서 DOM의미
자바스크립트가 웹 페이지 내 모든 요소에 접근할 수 있게 한다.
페이지의 콘텐츠 및 구조, 그리고 스타일을 자바스크립트로 수정이 가능해졌다.

{ document: { html: { head: { title: ... }, body: { header: ... } } } }

• window.document로 접근하거나, window는 생략 가능(전역 객체)하기 때문에 document로 접근하면 된다.
• document 객체는 수 많은 속성과 메소드들이 있다.(DOM API)

BOM

DOM API와 마찬가지로, BOM 객체들로부터 제공되는 API를 BOM API라고 한다. 최상위 BOM 객체에 해당하는 window 객체는 웹 브라우저 탭 하나 당 하나 존재하기 때문에, BOM API는 웹 브라우저 전체가 아닌 웹 브라우저 탭 하나를 기준으로 하고 있다. DOM과 달리 BOM은 공식적인 표준이 없기에 웹 브라우저마다 BOM API가 조금씩 다를 수 있지만 대부분의 브라우저가 비슷한 BOM API를 제공한다.

• navigator: 브라우저나, 운영체제(OS) 대한 정 표시
• screen: 화면에 대한 정보 표시
• location: 주소에 대한 정보 표시
• history: 앞으로가기, 뒤로가기등 주소이동 조작

 

Web API

Web API는 웹 브라우저가 제공하는 기능을 의미하는 것으로, DOM API나 BOM API 또한 웹 브라우저가 제공하는 Web API의 일부라고 생각하면 된다. 그런데 ECMAScript에서 정의하는 본질적인 JavaScript에서는 Web API, 즉 웹 브라우저가 제공하는 기능들까지 정의하고 있지 않다. 즉 Web API는 웹 브라우저가 제공하는 기능일 뿐, JavaScript 자체의 명세에는 포함되어 있지 않다는 것이다. 다만 각 웹 브라우저가 내장하고 있는 JavaScript 엔진이 Web API도 이해할 수 있도록 확장성 있게 구현이 되어 있을 뿐이다. 그래서 Node.js의 JavaScript 엔진이 크롬의 V8 엔진을 기반으로 한다는 말의 의미는, 크롬의 V8 엔진이 ECMAScript에서 정의하는 JavaScript 자체의 명세를 구현한 부분을 그대로 가져와서 엔진을 구축했다는 말이 된다. 다만 Node.js 엔진도 console.log() 함수와 같은 몇몇 Web API들은 이해할 수 있도록 어느 정도 확장성 있게 구축돼 있긴 하다.