JavaScript / HTML DOM과 자바스크립트 관계의 이해

1.HTML 페이지와 자바스크립트 객체

HTML페이지와 브라우저 윈도우나 탭에 로드되면 브루아저로부터 자바스크립트 코드에서 활용가능한 많은 객체들을 제공받는다. 다음은 3개의 객체그룹이다.

①자바스크립트 코어 객체

자바스크립트 코어 객체는 브라우저의 종류나 HTML 페이지의 구조에 관계없이 자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. 코어 객체에는 String, Math, Date, Array, Function 등이 있다.

②HTML DOM 객체

브라우저 HTML페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다. HTML DOM은 W3C의 표준이므로 모든 브라우저에서 호환된다. HTML태그를 동적으로 제어하기 위해서는 HTML DOM의 지식이 반드시 필요하다.

③BOM 객체

브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하도록 제공되는 객체들을 BOM객체라고 부른다. BOM객체에는 브라우저 윈도우를 나타내는 window객체, 웹페이지의 히스토리 정보를 나타내는 history객체, screen객체 등이 있다.

※HTML DOM, BOM 객체는 브라우저 사이에 호환이 잘 안된다.

많은 브라우저들이 W3C의 표준 DOM모델을 따르고 있지만, 초기시장을 지배한 익스플로러는 여전히 다른 속성을 가진 객체들과 이벤트 모델을 유지하고 있다. 또한 Firefox, 크롬 등 후발 브라우저들도 W3C의 표준을 다 만족시키지 못한 채 그들만의 속성을 가진 객체들과 이벤트 모델을 가지고 있다. 그러므로 웹 개발자가 모든 브라우저에 작동하는 HTML문서나 자바스크립트 코드를 만드는 것은 간단치 않다. W3C표준을 지켜 작성된 HTML문서나 자바스크립트 코드 역시 브라우저에 따라 지원되지 않을 수도 있다. 꼼꼼히 브라우저의 매뉴얼을 확인하는 것이 필요하다.

DOM

▶DOM의 목적

DOM객체는 HTML페이지가 출력된 후, DOM객체를 통해 HTML태그가 출려된 모양과 콘텐츠를 제어하기 위해서 HTML페이지에 작성된 각 HTML태그를 객체로 만든 것이다.

▶DOM 트리

브라우저는 HTML페이지를 로드하면서 HTML태그의 포함 관계에 따라 DOM객체들을 트리 구조로 만드는데 이것을 DOM트리 라고 부른다. 자바스크립트 코드는 DOM트리를 따라 DOM객체들을 마음대로 접근할 수 있다. 

▶DOM트리의 특징

①DOM트리의 루트는 document객체이다.

②DOM객체의 종류는 HTML 태그 종류만큼 있다.

③HTML태그 당 DOM객체가 하나씩 생성된다.

④DOM트리는 HTML태그의 포함관계에 따라 부모 자식 관계로 구성된다.

▶HTML태그의 출력과 DOM객체

얼핏 브라우저가 HTML 페이지를 읽으면서 HTML태그를 화면에 바로 출력하는 것으로 생각할 수 있지만, 사실은 브라우저가 HTML태그로부터 먼저 DOM객체를 생성하고 DOM트리를 구성한 후 DOM객체를 화면에 출력한 것이다. HTML페이지는 로드된후 사라지며 브라우저에는 DOM객체와 DOM트리만 존재한다. 그러므로 자바스크립트 코드로 DOM객체를 제어하면 그에 따라 즉각 브라우저화면에서 HTML태그의 모양이나 콘텐츠가 바뀌는것이다.

▶DOM객체의 구성요소

①HTML태그의 요소 : HTML태그는 엘리먼트라고도 불리며 엘리먼트 이름, 속성, CSS3, 이벤트 리스너, 콘텐츠

②DOM객체의 구성 요소(W3C의 표준) : 프로퍼티, 메소드, 컬렉션, 이벤트 리스너, CSS3