시작하기 전에..
- 자바스크립트는 웹 브라우저 기반의 객체 위에서 동작해요. 그렇기 때문에 여러분이 웹 개발자를 꿈꾼다면, DOM과 BOM에 대해 자세히 알아야 할 필요가 있어요.
BOM
모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있어요.
이 브라우저와 관련된 객체 집합이 BOM(브라우저 객체 모델)이에요. 이것을 이용해서, 브라우저와 관련된 기능을 구성할 수 있어요.
아래에서 다룰 DOM은 BOM 중 하나이며, 이 BOM의 최상위객체는 window객체에요. window객체는 모든 객체가 소속된 객체이고, 전역 객체이면서 창이나 프레임을 의미해요. 아래와 같은 종류가 존재해요.
- window.screen
- 사용자 환경의 디스플레이 객체
- window.location
- 현재 페이지의 url을 다루는 객체
- window.navigator
- 웹 브라우저 및 브라우저 환경 정보 객체
- window.history
- 현재 브라우저가 접근해왔던 url history(기록)
참고로, 브라우저에서 제공하는 이 모든 기능을 통틀어 Web API라고 해요. Web API는 자바스크립트의 기능은 아니지만 자바스크립트 등에 의해 제어될 수 있도록 브라우저에서 제공하고 있어요.
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn MoreDOM
우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석해요. 이 브라우저가 HTML코드를 해석하는 과정을 "파싱"이라 불러요.
파싱이 완료되면 화면을 통해 해석된 결과물을 보여줘요. 해석한 HTML 코드를 화면에 보여주는 과정을 "렌더링"이라고 부르고, 해석된 결과물에는 DOM이 존재해요.
좀 더 자세히 말하자면, 브라우저는 HTML 코드를 해석하여 HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성해요. 이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링하게 되요.
DOM(Document Object Model)은 HTML/XML 문서의 프로그래밍 interface라고 정의되고 있어요. 즉, 문서와 상호작용할 수 있는 API라고 이해할 수 있어요.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 XML/HTML로 작성된 문서 구조에 접근할 수 있는 방법을 제공해요. 즉, 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다는 뜻이에요.
- DOM을 구성하는 트리의 요소 하나하나를 노드(Node)라고 불러요.
- DOM은 window.document객체에요. 즉, DOM은 window객체의 하위 객체에요.
우리는 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정하고 웹 페이지 요소를 제어할 수 있어요. 이렇게 할 수 있는 이유는, 웹 콘텐츠(HTML요소)를 제어/조작할 수 있는 DOM API라는 것이 제공되고 있기 때문이에요.
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn MoreCRP(Critical Rendering Path)
- 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 View port에 표시하기까지의 과정을 의미해요. 이 과정은 DOM과 밀접한 관련이 있으니, 살펴보고 가도록 해요!
파싱
- 브라우저의 렌더링 엔진은 서버로부터 받은 HTML, CSS파일 등을 해석하는 과정을 거쳐요.
DOM 트리 구축
- 렌더링 엔진은 HTML 문서를 파싱하여, DOM 트리를 만들어요.
CSSOM 트리 구축
- 렌더링 엔진은 <style> 태그를 만나게 되면, HTML파싱을 멈추고 CSS파싱 작업을 시작하여 CSSOM 트리를 구축해요.
자바스크립트 실행
- 이 과정은 DOM 트리를 구성하는 과정 사이에 일어날 수도 있어요.
- HTML 파싱 중, 자바스크립트를 의미하는 <script> 태그나 외부 스크립트 참조 구문을 만나게 되면, DOM 파싱을 중지하고 자바스크립트 엔진에게 제어 권한을 넘겨 스크립트를 실행해요.
- 스크립트 실행이 끝나고 나면, 다시 DOM 트리를 그리기 시작해요.
＊렌더 트리 구축
- DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 형성해요.
레이아웃 생성
- 디바이스 view port 내에서, 노드들의 정확한 위치와 크기를 계산하는 레이아웃 단계를 거쳐요.
페인트
- 렌더링 엔진은 Paint Event를 발생시켜요.
- 해당 단계에서는, 렌더 트리를 탐색하며 레이아웃 단계를 거쳐 알아낸 구성 노드 정보를 이용해, 노드들을 화면에 표현해요.
✔ 렌더 트리(Render Tree)
웹 페이지에 표시될 HTML, 스타일 요소로 구성되는 트리에요. 브라우저는 렌더트리를 생성하기 위해 아래의 두 모델을 필요로 해요.
DOM(Document Object Model)
HTML 요소들의 구조화된 표현
CSSOM(Cascading Style Sheets Object Model)
요소들과 연관된 스타일 정보의 구조화된 표현
목적
- 그렇다면 DOM은 대체 왜 쓰이는 것일까요? HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적으로 상호작용을 하기 위해서 DOM이 필요해요.
- 앞서 자바스크립트를 활용해 문서 구조에 접근할 수 있고, 상호작용할 수 있다고 말했죠? 즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있는데, DOM이 해당 수정 및 제어 작업을 가능하도록 문서의 구조화된 표현을 제공하고 있는 것이에요.
- 아래는 DOM이 언제 활용될 수 있는지를 정리한 것이에요. 정리하는 차원에서 읽고 넘어가도록 해요!