Document Object Model, DOM (문서 객체 모델)
- HTML, XML 문서의 인터페이스이다.
- 문서를 객체화함으로서 여러 프로그램들의 페이지에 있는 콘텐츠와 구조, 그리고 스타일 등에 접근할 수 있는 방법을 제공하고, 그 내용을 변경할 수 있게 도와준다.
DOM의 생성 과정
-
웹 브라우저는 우선 읽어들인 문서를 분석하여 어떤 내용이 웹 페이지에 렌더링이 될지를 결정한 뒤, 렌더링을 수행한다.
-
이 때, 렌더링을 결정할 때 ‘렌더 트리’를 생성하는데, 웹 페이지에 표시될 HTML 요소들과 이와 관련한 스타일 요소들을 구성하게 된다.
- 렌더 트리를 생성하려면 아래의 두 가지 모델이 필요하며 이 과정에서 DOM과 CSSOM이 생성된다.
- DOM: 문서 객체 모델, HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Object Model): 캐스케이딩 스타일 시트 객체 모델, 요소들과 연관된 스타일 정보의 구조화된 표현
- 이 ‘렌더 트리’의 구축이 완료되면, 웹 브라우저는 브라우저에 표시될 내용들을 렌더 트리 속에서 선별해 배치한 뒤, 사용자가 볼 수 있도록 그려낸다.
- 렌더 트리를 생성하려면 아래의 두 가지 모델이 필요하며 이 과정에서 DOM과 CSSOM이 생성된다.
DOM의 구조
- DOM의 구조는 여러 개의 노드들이 얽혀있는 ‘노드 트리’ 혹은 ‘레이아웃 트리’로 표현된다.
- document라는 객체 속에는 최상위 부모인
html이 있으며, 하위에head와body요소가 존재한다. head와body에는 각각에 속하는 요소들이 얽히고 얽혀 하나의 나무와 같은 구조를 형성하게 되는데 이를 ‘노드 트리’ 혹은 ‘DOM 트리’, ‘레이아웃 트리’라고 부른다.
DOM의 용도
- 개발자가 HTML 등 웹 페이지 문서에 접근하기 위해서는 DOM을 이용해 접근해야 한다.
- 이 때, 문서에 접근할 수 있게 도와주는 언어 중 하나가 JavaScript이다.
- JavaScript에서 웹 브라우저에 접근하기 위한 DOM 객체는
window와 그 하위인document가 있다.- 개발자는 이 객체에 접근해 웹 페이지에 없는 요소를 추가하거나, 있는 요소를 변경, 삭제 등을 할 수 있다.
- 아울러 DOM 객체는 JavaScript에 존재하는 요소가 아니다.
- console.log(window)나 console.log(document)를 입력 시, 에러가 뜨는 것은 그런 이유이다.
주의 사항
-
DOM은 HTML이 아니다.
-
DOM은 HTML 문서의 인터페이스이다. 문서 자체에 올바른 HTML 규칙을 작성하지 않더라도, DOM에서는 규칙을 교정시켜 올바르게 출력해준다.
<!DOCTYPE HTML> <html> HELLO, World! </html> <!-- HTML 문서에 <head>와 <body>가 없더라도 DOM에서는 규칙을 교정해 추가해준다. --> -
또한, JavaScript를 이용해 DOM 트리에 새로운 노드를 추가할 수 있다. 그러나, 이 노드가 HTML 문서에 반영되는 것은 아니다.
const newNode = document.createElement("p"); newNode.innerText = "내용 추가!";
-
-
DOM은 브라우저에 보이는 것이 아니다.
-
브라우저는 DOM과 CSSOM의 조합인 렌더 트리를 통해 스크린에 웹 페이지를 그려낸다.그러나, DOM의 모든 요소가 브라우저에 보여지지는 않는다.
<!DOCTYPE HTML> <html lang="ko"> <head></head> <body> <h1 style="display:none;">까꿍</h1> </body> </html>위의 코드에서
h1은 DOM에서는 보여지고 있지만, 실제 브라우저에서는display:none;이라는style의 설정으로 인해 보여지지 않게 된다.이런 점에서 DOM과 브라우저에서 보이는 것이 각각 다르다는 점을 명심해야 한다.
-