DOM은 HTML, XML 문서의 인터페이스로, 프로그래밍 언어가 문서에 접근하고 수정(구조, 스타일, 내용 등)할 수 있습니다. 브라우저에 의해 로드되고 노드 트리와 같이 구조화된 표현(structured representation)으로 제공됩니다. DOM은 프로그래밍 언어와 독립적으로 디자인되었기 때문에, JS와 파이썬 등 어떠한 언어에도 제약이 없습니다.
DOM에 접근하기 위해 환경설정이나 라이브러리를 설치할 필요가 없습니다. 개발자도구 콘솔에서도 아래 이미지와 같이 간단하게 호출할 수 있습니다. 콘솔에서 document object(브라우저가 불러온 웹페이지이자, 페이지 콘텐츠의 진입점)를 직접 호출하거나 window object(DOM 문서를 담은 창)의 element로 document를 호출할 수 있습니다.
Example: paragraph 태그 배경 바꾸기
html과 javascript를 이용해서 DOM을 변경해보겠습니다. 구현한 애플리케이션은 버튼을 클릭하면, document object의 특정 요소(두 번째 paragraph 태그)의 배경색이 변하도록 동작합니다.
HTML
<body>
<input
type="button"
value="변경하기"
onclick="setBackground()" />
<p>hi</p>
<p>hello</p>
</body>
JavaScript
function setBackground() {
// document의 모든 p 태그를 구조분해할당으로 초기화하기
const [p1, p2, ...others] = document.getElementsByTagName("p");
// 두번째 p 태그 배경색을 하늘색으로 바꾸기
p2.style.background = "skyblue";
}HTML 파일과 JS 스크립트를 위와 같이 작성했습니다. 아래는 동작 결과입니다.
Result
HTML vs DOM
HTML과 DOM을 착각할 수 있습니다. 구조가 유사하기 때문이죠. HTML은 초기 페이지를 나타내고, DOM은 현재 페이지를 나타냅니다. 사용자가 웹사이트에 접속한다고 가정해 봅시다. 브라우저는 서버에 웹페이지를 요청하고, 서버는 웹페이지의 HTML을 반환합니다. 브라우저는 HTML을 렌더링합니다. 그리고 위의 예시와 같이 사용자가 웹페이지의 변경하기 버튼을 누르면, 자바스크립트가 DOM의 노드를 수정합니다. 그 결과, 서버로부터 받은 HTML과 DOM은 달라지게 됩니다.
이러한 DOM 수정 결과는 개발자 도구의 Elements 탭(DOM)과 Sources 탭(HTML)를 비교하면 확인할 수 있습니다. 버튼 클릭과 같은 이벤트로 변경사항이 발생했을 때, Sources 탭의 html은 변경이 일어나지 않지만, Elements 탭의 html은 변경 내용이 적용되어 있습니다..
출처
- Introduction to the DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
- Traversing an HTML table with JavaScript and DOM Interfaces: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
- HTML versus the DOM: https://developer.chrome.com/docs/devtools/dom/#appendix
'web' 카테고리의 다른 글
| React 개발자가 구글 oAuth를 이해하기 (0) | 2025.03.21 |
|---|---|
| 챗 봇 스트리밍 통신 (2) | 2024.06.06 |
| Core Web Vitals (0) | 2023.07.28 |
