DOM 이란?
DOM은 Document Object Model. 문서 객체 모델이다.
DOM은 HTML 문서들을 위해 구조를 제공하는 인터페이스이다. 이는 노드 트리로 표현할 수 있다.
<html>
<head>
</head>
<body>
</body>
</html>이 DOM 구조에 프로그래밍 언어(JS)가 접근해서 문서 구조나 스타일 등을 변경한다.
그렇다면 DOM을 왜 알아야 할까? 웹 페이지는 문서를 읽어서 보여준다. 이때 문서의 특정 요소 또는 문서 자체가 객체 형태로 존재하지 않는다면 프로그래밍 언어(JS)가 접근할 수 있는 방법이 없다.
따라서 이 문서의 요소에 접근하기 위해 DOM이 필요하다.
웹페이지는 HTML 문서를 읽고 우리에게 보여준다. 이때 우리에게 보이는 뷰 포트는 DOM은 아니다! 이를 두 가지 내용을 통해 알아보자.
첫 번째로, p 태그의 style에 display: none 처리를 했다 하더라도 DOM에는 p 태그가 남아있다. 우리가 Document API를 통해 p 태그에 접근할 수 있기에 쉽게 알 수 있다.
두 번째로, 가상 선택자 ::before와 ::after는 DOM에 남아있지 않다. 가상 선택자는 CSS의 요소이다. DOM은 원본 HTML 문서로부터 빌드 되기 때문에 CSS 요소인 가상 선택자는 DOM에 생성되지 않는다. 따라서 DOM에서 접근할 수 없고, JS로 제어가 불가능하다.
마무리
DOM에 대해 확실하게 개념을 잡은 건 처음이다. 웹페이지와 문서와의 관계, 우리가 DOM에 어떻게 접근하는지에 대해 이해할 수 있는 좋은 시간이었다.
