티스토리 뷰

개발/CS, Network

DOM과 브라우저 동작원리

hahagarden 2023. 3. 5. 03:11

DOM이란

DOM은 Document Object Model 문서객체모델의 약자이다.


웹페이지의 구조를 나타낸 text일뿐인 HTML파일이 DOM을 통해 태그 하나하나 생명력을 얻는다.

DOM은 연결다리이다.

DOM은 HTML, XML문서의 프로그래밍 인터페이스이다. 글자뿐인 HTML에 프로그래밍 언어가 어울릴 수 있도록 연결하는 역할이다. 페이지의 콘텐츠는 DOM에 저장되고 자바스크립트가 DOM에 접근하여 조작할 수 있다.
DOM은 문서를 구조화하는데, HTML문서를 트리구조로 만든다. DOM트리라고도 부른다.

DOM은 프로그래밍 언어가 아니다.

DOM은 API이다.
DOM은 HTML(또는 XML)과 상호작용하고 표현하는 API이다.
DOM은 document의 모든 노드에 접근하고 사용할 수 있도록 브라우저에서 코드를 실행할 수 있도록 해주는 이유로, Web에서 가장 많이 사용되는 API이다.
DOM은 프로그래밍 언어가 아니고 프로그래밍 언어에 속해있지도 않다. 그러나 DOM이 없으면 자바스크립트는 웹페이지의 정보를 얻을 수 없다. 웹브라우저에서 오직 자바스크립트를 사용하기 때문에 항상 DOM을 조작하는 언어가 자바스크립트라서 자바스크립트의 기능으로(프로그래밍 언어에 속해있는 것처럼) 오해를 받는다. 프로그래밍 언어와 독립적인 API이다.
DOM은 어떠한 언어에서도 구현할 수 있고, 각각의 브라우저마다 구현되어 있고, 작은 부분이지만 브라우저가 아닌 곳(서버사이드 스크립트)에서도 사용할 수 있다.

ChatGPT의 설명. ChatGPT는 혁명이다..

 

DOM은 객체로 나타낸다.

DOM은 웹페이지의 모든 콘텐츠를 객체로 나타낸다.
DOM에 따르면 모든 HTML태그는 객체이다. 태그 안의 문자(text)역시 객체이다.
DOM은 자바스크립트에서 document 객체에 구현되어 있다. document객체를 통해 DOM에 진입할 수 있다. 진입점을 통과하면 모든 node에 접근할 수 있다.

const display = document.querySelector('.display');
const button = document.getElementById('button');
button.innerText = 'login';
button.innerText = 'logout';

위 코드가 모두 자바스크립트에서 DOM에 접근하는 방법이다. 단순 문자였던 HTML을 DOM덕분에 조작할 수 있는 것이다.

DOM 사용하기

const container = document.querySelector(".container");

위와 같이 document객체에 DOM API를 사용해 셀렉터를 전달하여 HTML 요소를 조작할 수 있다. 셀렉터는 HTML 요소(div), id(#video), class(.container) 세가지가 가장 많이 사용된다.

 

 

브라우저 동작 원리

DOM은 <script>의 위치가 중요하다

도대체 DOM이 무엇인가에 대한 의문은 어느정도 풀렸다. HTML을 프로그래밍 언어로 조작할 수 있도록 하는 인터페이스이다. HTML을 JavaScript가 사용할 수 있도록 DOM tree로 변환한다.
우리가 HTML에 JavaScript를 사용할 수 있게 되었지만 잘 사용하기 위해서는 <script>태그도 DOM과 관련이 있어서, <script>태그를 <head> 내부가 아닌 <body>의 내부 하단에 삽입해야 한다.

브라우저 동작 원리

브라우저의 렌더링 과정

브라우저가 하는 일은 사용자가 들어가고 싶은 웹페이지를 서버에 요청을 하면 서버가 HTML, CSS, JavaScript, 이미지 파일 등을 응답으로 보내준다.
브라우저에는 렌더링엔진과 자바스크립트엔진이 있다.
서버로부터 파일을 받으면 브라우저의 렌더링 엔진의 HTML Parser가 HTML → DOM tree로 변환하고 CSS Parser가 CSS → CSSOM tree로 변환한다. DOM tree와 CSSOM tree가 Render tree로 결합되고 Render tree를 기반으로 브라우저는 웹페이지를 표시한다.

DOM tree가 완성이 되면 자바스크립트가 콘텐츠를 조작할 수 있을 것이다. 그러나 <script>태그를 만나는 순간 렌더링엔진의 HTML Parser는 하던 일(DOM 생성 프로세스)을 멈추고 자바스크립트엔진으로 제어권한을 넘긴다. 자바스크립트의 실행이 완료되면 다시 HTML Parser가 제어권한을 가지고 DOM 생성을 이어간다.
그래서 <head>에서 <script>를 만난다면 <body>에 있는 태그들이 아직 DOM으로 변환되지 않았기 때문에 단지 문자일 뿐이라서 자바스크립트가 조작하려고 한다면 작동이 안될 것이다.
모든 태그들을 DOM으로 변환한 후인 <body>의 하단에 <script>를 위치시켜서 렌더링을 마치고 자바스크립트를 실행시킬 수 있도록 해야 한다.

 

Virtual DOM은 무엇인가?

https://hahagarden.tistory.com/manage/newpost/88?type=post&returnURL=https%3A%2F%2Fhahagarden.tistory.com%2F88

 

https://hahagarden.tistory.com/manage/newpost/88?returnURL=https%3A%2F%2Fhahagarden.tistory.com%2F88&type=post

 

hahagarden.tistory.com

 

Reference

https://developer.mozilla.org/ko/docs/Glossary/DOM
https://www.codestates.com/blog/content/dom-javascript
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://poiemaweb.com/js-browser

ChatGPT

 

이전 블로그(velog.io/@hahagarden)에서 이전해온 글입니다. 

반응형
저작자표시

'개발 > CS, Network' 카테고리의 다른 글

URL과 URI / IP와 PORT / 도메인과 DNS  (0) 2023.03.29
Client Server Architecture / Protocol / API  (0) 2023.03.28
CDN(Content Delivery Network)이 무엇일까?  (0) 2023.03.07
Virtual DOM을 왜 사용할까?  (0) 2023.03.06
CLI(Command Line Interface)가 무엇일까?  (2) 2023.03.06
댓글