🤔 DOM?
DOM이란 문서 객체 모델(The Document Object Model)은 HTML, XML 문서의 프로그래밍 interface이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
그럼 문서 구조는 무엇일까?
HTML 문서에는 <body>, <p> 등 여러 태그가 문서의 구조를 이루고 있다. 이런 여러 HTML 요소의 계층을 반영해서 만든 객체가 DOM이다.
HTML 문서를 객체로 표현하면 Javascript와 같은 스크립트 및 프로그래밍 언어가 웹페이지에 접근할 수 있다. 즉, DOM은 HTML로 구성된 웹페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 한다.
각 언어마다 DOM에 접근하는 방법이 다르다. JavaScript에서는 대표적으로 HTML 요소의 id 선택자를 사용하는 document.getElementBuId("#id") 메서드가 있다.
또 React에서는 useRef() 함수를 사용해서 DOM에 접근할 수 있다.
☝️🤓 DOM의 계층 구조
DOM은 HTML 문서 구조의 계층을 표현하는 객체이다. DOM의 계층은 트리 자료 구조로 구축된다. 트리 자료구조는 하나의 최상위 노드에서 다른 자식 노드들이 뻗어나가는 구조이다.
아래 예시와 같이 document노드가 맨 위에 있고 이어서 element, text, attribute 노드가 나오는 계층적 구조가 있는 것을 볼 수 있다.
DOM이 생성되는 순서
HTML 웹페이지는 HTML 파서에 의해 DOM으로 변환된다.
하지만 여기서 파서가
파서는 DOM 생성을 중지하고 자바스크립트 엔진이 script에 정의된 파일 및 코드를 실행한다. 스크립트 실행이 완료되면 다시 HTML 파서가 DOM 생성을 다시 시작한다.
즉, 브라우저는 동기적으로 HTML과 JavaScript를 처리하기 때문에
DOM 생성이 지연되지 않고, 스크립트에 DOM을 접근하는 코드가 있다면 제대로 실행되지 않기 때문이다.
🖇️참조
https://velog.io/@haizel/DOM은-왜-트리-구조-일까
https://docs.tosspayments.com/resources/glossary/dom
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
