DOM은 뭐고 가상 DOM은 뭔가요? (+ Svelte와 React의 차이) - 얄코
DOM은 브라우저에 내장되어 있는 API - 김버그
브라우저는 CSS 역시 CSSOM이라는 API를 이용해 JavaScript가 이해할 수 있는 객체로 알려준다
DOM(Document Object Model) 은 웹사이트를 유저와 상호작용할 수 있도록 만들기 위해 필수적인 부분입니다. DOM은 프로그래밍 언어가 웹사이트의 내용(content), 구조(structure) 그리고 스타일을 조작할 수 있게 만들어주는 인터페이스입니다. 자바스크립트는 인터넷 브라우저 상의 DOM과 연결해주는 클라이언트 사이드 스크립팅 언어입니다.
웹사이트는 액션(action)을 취합니다. 사용자가 불완전한 형태의 폼을 제출했을 때는 에러를 보여주고 네비게이션 메뉴를 토글했을 때는 이미지를 보여주는 것과 같이 화면을 전환하죠. 이러한 일들은 자바스크립트에 접근하여 DOM을 조작한 결과입니다. 이 아티클에서는, DOM이 무엇인지, document 오브젝트를 어떻게 다루는지 그리고 HTML 소스코드와 DOM의 차이점은 무엇인지에 대해 배울 것입니다.
알아둬야 할 것: DOM은 특정 프로그래밍 언어와는 독립적이게 만들어지는 것이지만, 이 글에서는 HTML DOM의 자바스크립트적 구현에 집중할 것입니다.
DOM과 DOM이 웹 작업에 어떻게 연관이 있는지에 대해 효과적으로 이해하기 위해, HTML과 CSS에 대한 현존하는 지식을 반드시 알아야 합니다. 자바스크립트 문법과 코드 구조의 기초에 대해 친숙한 것은 크게 도움이 됩니다.
가장 기초적인 수준에서 보자면, 웹사이트는 HTML Document라는 것을 포함합니다. 웹사이트를 보기 위해 사용하는 브라우저는 HTML과 CSS를 해석하는 프로그램입니다. 그리고 style, content, structure 등을 우리가 보는 페이지에 렌더링합니다.
HTML과 CSS의 structure와 style을 파싱하기 위해서, 브라우저는 Document Object Model이라 불리는 document의 겉모양(representation)을 만듭니다. 이 모델(model) 은 자바스크립트가 오브젝트로서의 웹사이트 document의 컨텐트와 엘리먼트에 접근할 수 있도록 해줍니다.
자바스크립트는 상호작용하는 언어입니다. 사실 새로운 개념들은 실제로 써봄으로써 이해하는 것이 더 쉽습니다. 매우 간단한 웹사이트를 하나 만들어봅시다. index.html 파일을 만들고 새로운 프로젝트 디렉토리에 저장해보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>
index.html
이 코드는 새로운 웹사이트 스켈레톤과 흡사합니다. 위 코드는 웹사이트 document의 가장 필수적인 측면들을 모두 포함합니다. doctype 그리고 head와 body가 포함된 html태그가 그것들입니다.
우리의 목적을 위해, 우리는 크롬 브라우저를 사용할 것이지만, 다른 현대 웹브라우저에서도 비슷한 출력결과를 얻을 수 있습니다. 크롬 브라우저 내부에서, index.html을 여세요. "Document Object Model"이라고 제목이 적혀있는 순수한 웹사이트를 볼 수 있으실 겁니다. 페이지의 아무 곳이나 오른쪽 클릭하여 "검사(Inspect)"를 클릭해보세요. 그러면 개발자 도구가 열릴 것입니다.