사상누각. 모래위에 세운 집 이라는 뜻으로 기초가 약하여 오래 가지 못하는 것을 뜻하는 고사성어로 다른말로 하면 바로 "나"다.
사실 급한 마음에 기본적인 개념을 이해하기 위해서 시간과 노력을 쏟지않고, 당장 눈에 보이는 어떠한 결과물을 만들어 내는거에 급급했다.
이제라도 부족한 기초에 대해서 공부해보려고 한다.
What is DOM?
DOM은 Document Object Model의 약자다.
Document는 문서, Object는 객체, Model은 모델, 그래서 문서 객체 모델로 번역을 할 수 있는데 이름만으로는 도통 감이 오지는 않는다.
여기서 문서 객체는 <html>이나 <body>같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객제(Object)로 만들면 이것들을 문서 객체라고 한다.
그리고 Model은 문서객체를 인식하는 방법으로 해석할 수 있다.
즉, DOM은 웹 브라우저가 HTML 페이지를 인식하는 방법을 이야기 하거나, 문서 객체와 관련된 객체의 집합에 관한것 이다. (사실 웹 페이지 자체가 일종의 문서임)
DOM은 문서의(웹 페이지) 구조화된 표현을 제공하며, 프로그래밍 언어가(JavaScript)가 DOM구조(Tree로된 구조)에 접근할 수 있는 방법을 제공해, 문서(웹 페이지)의 구조, 스타일, 내용등을 변경할 수 있도록 도와준다.
또 DOM은 node와 object로 문서(웹 페이지)를 표현하는데, 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용할 수 있게 연결시켜주는 역할을 담당한다.
DOM은 어떻게 생겼을까?
대머리도, 걸어다니는 나무처럼 생기지는 않았지만 일종의 나무라고 할 수 있을듯 하다(?)
DOM은 Tree라는 형식의 자료구조를 가지고 있는데, 말 그대로 Root node부터 시작해서 Parent(부모 노드)가 Child(자식 노드)를 가지는 구조다. 그리고 자식이 없는 경우는 leaf node(잎)이라고 한다.
이미지 출처: https://blog.10pines.com/2018/08/27/reactjs-virtual-dom/
이미지 출처: https://m.blog.naver.com/magnking/220972680805
Node란?
Tree 구조에서 Node는 Root를 포함해서 모든 개체를 Node라고 표현한다.
head, body, h1 등등의 태그와 태그 안의 텍스트나 속성 등도 모두 Node에 속한다고 한다.
JavaScript로 문서객체를 생성한다는 것은?
문서 객체가 생성되는 방식은 두가지로 나누어 볼 수 있다.
우선 웹 브라우저가 HTML 페이지에 적혀있는 태를 읽으면 생성하는 것으로, 이런 과정을 정적으로 문서 객체를 생성한다고 한다.
말 그대로 단순히 적혀져 있는 그대로 문서객체가 생성되는것을 표현한 것이다.
반대로 원래의 HTML 페이지에는 없던 문서객체를 JavaScript를 이용해서 생성할 수 있는데, 이런 과정을 동적으로 문서객체를 생성한다고 표현한다.
즉 JavaScript로 문서객체를 생성한다는것은 HTML페이지에 처음에는 없던 문서객체를 동적으로 생성한다는 의미가 된다.
참고
