JavaScript는 HTML을 컨트롤러하기 위해서 나왔기 때문에 문자열이 아닌JavaScritp가 알아들을 수 있는 형태로 바꿔야했습니다.
브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있는데, 브라우저로 HTML파일을 열게 되면 렌더링 엔진이 HTML로 작성된 문서를 한줄 한줄 해석합니다. 그리고 해석 끝나면 그 문서를 객체화 하여 자바 스크립트로 접근 할수 있도록 합니다. 우리는 이걸 문서를 객체화 했다고 해서 문서(Document) 객체(Object) 모델(Model) 즉 DOM 이라고 합니다.
따라서 DOM은 문자일 뿐인 HTML을 의미있는 객체인 노드 객체로 바꿔서 추가적인 작업을 할 수 있는 기능을 제공하는 것 입니다.
DOM 이란?
문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서구조, 스타일, 내용 들을 변경할 수 있게 돕는다.
DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스트립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
스크립트 언어로 HTML 문서를 제어할 수 있도록 웹 문서를 객체화 한 것을 말합니다.
h1의 title인 주문할 것으로 변경됩니다.
어떻게 변경이 가능했던 걸까요?
위 코드중 document.getElementById 와 textContent는 자바스크립트 요소가 아닙니다.
먼저 크롬이나 사파리 같은 브라우저에서 개발자 도구의 콘솔창을 열어서 document를 로그로 찍어봅시다.
document 객체 출력
이번에는 컴퓨터 자체에서 자바스크립트 실행하는 Node.js 환경에서 똑같이 console.log(document); 를 실행합니다.
Node.js에서 console.log(document); 실행
Node.js 에서 document가 없다고 에러 뜹니다.
브라우저에서 되는데 Node.js에서는 안되는 이유
document라는 객체가 자바스크립트의 요소가 아니라 브라우저 환경에서 제공되는 것이란걸 예상할 수 있듯이, document 객체는 브라우저에서 제공하는 window 객체의 한 요소입니다. window.document 객체를 DOM 이라고 분류합니다.
즉, document 객체는 브라우저에서 제공하는 window의 한 요소이고, 이걸 DOM이라 분류합니다.
DOM은 어떻게 만들어질까?
웹 사이트에 접속하면 브라우저가 HTML 문서를 읽습니다.
HTML 코드를 어떤 제품의 설계도라고 생각하고, 브라우저를 공장이라고 생각 합니다. 공장에서 HTML 설계도를 해결하는 과정을 거치는데, 이를 파싱(Parsing) 이라고 합니다. 공장에서 설계도를 파싱하는 과정을 거쳐서 DOM이라는 기계를 만듭니다.
정리하면, HTML 이란 설계도를 브라우저라는 공장으로 보내면 DOM이라는 기계가 만들어진다고 비유 할수 있습니다.
위의 예제 HTML문서를 브라우저 파싱하면 이런 구조의 DOM이 만들어진다.
HTML 요소들을 1개의 부모 태그와 n개의 자식 태그를 가질 수 있습니다.
이런 구조를 표현하면 트리 구조를 갖게 됩니다. 이것을 DOM Tree라고 하고 요소들을 하나하나 Node라고 부릅니다.
웹 문서를 제어할 수 있도록 DOM을 만들었기 때문에 각각의 Node에 접근해서 제어할 수 있습니다.
DOM에 접근한 후 제어해야 하는데 어떻게 접근 할 수 있을 까요?
document.getRootNode() 명령어
브라우저 콘솔창에 .getRootNode() 최상위 노드를 반환하는 명령어를 작성하면 document가 나오는 걸 확인 할 수 있다
즉, document 객체는 웹페이지 자체를 의미하며 DOM Tree의 최상위 노드입니다.
이 document 객체로 원하는 HTML 요소에 접근할 수 있습니다.
document가 DOM 요소에 접근하기 위한 진입접 입니다.
document 객체로 DOM 객체 접근한 다음 접근객체에서 지원하는 프로퍼티로 제어 가능합니다.
document는 getElementById 란 버튼, 즉 기능이 있는데 이건 DOM 내에서 주어진 ID, 여기서 title을 가진 노드, h1이라는 부품을 가져오는 기능을 실행합니다. 그렇다면 title 변수에서는 h1부품이 있을 것 입니다. textContent 라는 건 부품의 기능입니다. 거기에 어떤 값을 대입하면 텍스트 값이 그걸 바뀌도록 해줍니다.
예제에 사용된 h1, ul,li,.button 요소들을 각각 상속 구조를 갖고 있습니다.
각 요소가 어떤 범주에 속하는지를 나타내는 상속도
예를 들어 h1이 속한 HTMLHeadingElement는 HTMLELement 란 것으로 부터 상속받고, HTMLElement는 Element, Element는 Node, Node는 EventTarget으로 부터 상속 받습니다.
최상위에 EventTarget이 있다는건, 결국 모든 요소들이 EventTarget 이라는 공통범주에 속한다는 말입니다.
즉, 아래의 것들은 모두 EventTarget 이라는 말입니다.
getElementById 라는 기능은 document의 고유한 기능입니다. 그렇기 때문에 document에서만 사용할 수 있습니다.
한편 글자를 바꾸는데 사용했던 textContent는 Node의 기능 입니다. 그말은 즉, 그 밑으로 들어오는 요소들이 textContent 기능을 사용할 수 있다는 것입니다.
