[JavaScript]DOM이란
BOM이란 무엇인가?
웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 모든 서비스는 웹 브라우저를 바탕으로 실행이 된다. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM:Browser Object Model)이라고 부른다. 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 이 BOM 중의 하나이다. 브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체이다. DOM은 이 window 객체의 하위 객체이기도 하다.
DOM이란 무엇인가?
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 interface이다.
DOM은 Document Object Model의 약자이다. Document는 문서이고 Object는 객체로 번역된다.
여기서 문서 객체란 무엇일까?
문서 객체란 <html>이나 <body>같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다.
DOM은 넓은 의미로 웹 브라우저가 html페이지를 인식하는 방식을 의미한다. 조금 좁은 의미로 본다면 document객체와 관련된 객체의 집합을 의미할 수도 있다. 이제 DOM을 보게 되면 웹 브라우저가 html 페이지를 인식하는 방식을 이야기하거나 문서 객체와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측할 수 있다.
이 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
DOM과 HTML의 차이점
DOM은 HTML 문서로부터 생성이 되지만 항상 동일하진 않다.
- html : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어있다. (최초로 화면을 그릴 때 사용하는 설계도)
- DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타나는 인터페이스)
[DOM이 원본 HTML 소스와 다를 수 있는 케이스]
1. 작성된 HTML 문서가 유효하지 않을 때.
DOM은 유효한 HTML 문서의 인터페이스이다. DOM을 생성하는 동안 브라우저는 유효하지 않은 HTML코드를 올바 르게 교정한다.
2. JavaScript에 의해 DOM이 수정될 때.
DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있다.
document.createElement('p')와 같은 형태로 새로운 노드를 추가할 수 있지만 이 코드는 DOM을 업데이트 하는 것이지 html 문서의 내용을 변경하지는 않는다.