DOM이란?
웹 브라우저에 접속하면 서버에 HTML 형식으로 저장된 웹문서를 브라우저가 다운로드 받아서 HTML에 표현된 양식대로 화면에 표시하여 출력하는 방식으로 동작합니다.
웹 사이트는 출력뿐만 아니라 사용자의 입력을 받아 저장하기도 하는데 최초의 웹은 사용자의 입력을 서버에 전송하고 결과를 다시 HTML 형태로 내려받아 화면에 출력하는 방식으로 작동했습죠.(매우 비효율적😯)
이를 개선하기 위해 웹 브라우저에 프로그램 언어를 탑재하였고 웹 문서에 코드를 함께 포함하여 서버에서 새 화면의 HTML 문서를 내려받지 않고도 동적으로 화면을 변경할 수 있게 되었어요.
이렇게 화면을 변경할 수 있도록 제공된 API를 DOM(Document Object Model), 문서 객체 모델이라 하며 브라우저에 탑재된 언어를 통해서 브라우저 화면을 조정합니다.
문서 객체 모델(DOM)이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM과 자바스크립트
웹 페이지는 일종의 문서(document)이므로 웹 브라우저를 통해 해석되어 화면에 표현됩니다. 웹 페이지를 구성하는 property, method, event 들은 모두 객체이므로 자바스크립트(스크립팅 언어)를 사용해 요소들에 접근하여 조작할 수 있어요.
DOM은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다🔗. 여기서 주로 사용되는 스크립트 언어가 JavaScript
API (web or XML page) = DOM + JS (scripting language)
DOM tree
브라우저는 문서에 대한 모델을 메모리에 생성된 모델은 객체의 트리로 구성되는데 이것을 DOM tree라고 합니다.
Reference
