구체적인 HTML / CSS 용어들을 정리하기 전에 큰 틀을 잡아놓고 가는 게 좋을 것 같아 작성해보는 DOM 이야기. HTML에 대해 찾아보면 다들 돔, 돔 하는데 이상하게 그 말이 와닿지 않았다. 지금까지 자바스크립트를 공부하며 이해한 건, '문서' 자체를 객체로 이해하면 된다는 사실이다. 천천히 살펴보자.
chatGPT에게 DOM이 뭔지 물어봤다.
Document Object Model은 웹 문서를 위한 프로그래밍 인터페이스다. 문서의 구조는 트리 객체를 형성하고, 각 객체는 문서의 일부를 나타낸다.
무슨 말일까? 이를 알기 위해서는 웹 페이지(web page)와 웹 문서(web document)를 구분할 필요가 있다. 우선 웹 페이지는 웹 문서를 기반으로 만들어졌다. 현재 브라우저를 통해 보고 있는 블로그 글이 바로 웹 페이지다. 텍스트, 이미지, 동영상 등 다양한 요소들이 클라이언트에게 나타나는데, 이는 주어진 웹 문서를 브라우저가 해석하고 렌더링해 클라이언트에게 웹 페이지 형태로 전달한 결과물이다.
이때 웹 문서의 구조를 결정하는 게 바로 HTML(HyperText Markup Language)이다. HTML에서 갖가지 태그를 통해 텍스트와 이미지 등의 위치, 계층 구조를 만든다. 이러한 HTML을 브라우저를 통해 DOM을 생성한다. DOM은 HTML의 요소들을 객체로 표현해서 JavaScript와 같은 프로그래밍 언어가 조작할 수 있게 해준다.
예를 들어보자.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<p>Hello!</p>
</body>
</html>
가장 기본적인 HTML 구조다. body 태그 안에 p태그로 Hello! 라는 텍스트를 작성했다. 우리는 이렇게 작성된 HTML 코드를 브라우저를 통해 확인한다. 브라우저는 이때 HTML을 해석해서 DOM을 형성한다. DOM은 HTML을 작성했을 때 만든 구성처럼 tree hierachy를 가지며 가장 최상위 객체로 document가 있다.
우리가 허구한날 document.querySelector를 사용했던 건, 브라우저가 HTML을 해석해 만든 DOM구조의 가장 최상위 객체를 불러낸 다음 그 객체의 메서드를 사용한 것이다. HTML의 <p> 요소는 DOM에서 HTMLParagraphElement 객체로, <div> 요소는 HTMLDivElement 객체로 나타난다. 혹은 사용자가 <input> 요소에 값을 입력했다면, 사용자는 HTMLInputElement 객체의 value 프로퍼티를 변경한 것이다. 이처럼 DOM이라는 개념 덕분에 모든 요소가 객체로 접근이 가능하고, 객체 안에서 프로퍼티나 메서드를 정의해 조작할 수 있다.
즉, chatGPT가 말해준 것처럼 HTML로 작성된 각각의 요소들은 DOM에서 객체로 취급되고, 가장 최상위 객체인 document의 하위 객체로서 웹 문서를 구성한다. 그래서 웹 문서를 구성하는 요소들이 제어 가능한 것이다. 특히 JavaScript로 객체에 접근해 동적으로 제어할 수 있다.
JavaScript를 입문할 때 이런 저런 정보를 찾다, 'HTML이 DOM이다' 라는 설명을 봤다. 이 설명으로 인해 JavaScript와 HTML의 관계가 더욱 헷갈린 것같다. 물론 객체와 브라우저에 대해 지식이 없는 사람에게 최선의 설명이긴 하다만... 귀띔이라도 해줬으면 좋았을 듯.
'공부 > 코딩' 카테고리의 다른 글
| HTML / CSS 정리 3편 : Flexbox (0) | 2024.09.01 |
|---|---|
| HTML / CSS 정리 2편 : display, inline과 block에 대해 (0) | 2024.08.31 |
| Java 이야기 - 객체 지향 프로그래밍 (Object-Oriented Programming) (0) | 2024.08.09 |
| <김영한의 실전 자바: 중급 2편> - 수강 완료 (with 쉽배자) (0) | 2024.08.06 |
| 알아두면 좋은 IntelliJ IDE 기능들 - 디버거 (0) | 2024.08.02 |
