DOM은 그저 object일 뿐이다!
처음부터 무슨 말인가 싶겠지만, 이 결론을 미리 보시면 이해에 도움이 될 거예요.
다시, Document Object Model이란? 웹 페이지를 구성하는 JavaScript object들의 집합이예요.
console.log(document.querySelector('.message').textContent);이건 웹 페이지의 요소에 접근하는 유효한 JS 코드예요.
그렇다면 동작이 어떤지에 관계없이 코드로만 알 수 있는 사실이 있는데, 바로 저 document가 (querySelector method를 가지고, 다시 textContent property를 가진) object라는 사실이예요.
처음에 DOM을 '웹 페이지를 구성하는 JavaScript object들의 집합' 이라고 했죠?
만약 우리가 웹페이지에 h1 요소를 가지고 있다면, DOM은 반드시 h1의 HTML 요소를 모델링하는 자바스크립트 object를 가지고 있을거예요.
또한 역으로, 우리 JS 코드로 그 document object를 조작하면 웹 페이지 또한 업데이트 될 거예요.
이렇게 JS로 DOM을 제어할 수 있기 때문에 DOM 자체를 JS의 요소라고 혼동할 수 있는데, 그저 JS와 웹 페이지가 interact 할 수 있도록 해주는 매개체(web API)일 뿐이예요.
DOM은 JS같은 특정 언어에 종속되지 않고 브라우저에서 독립적으로 디자인 되었는데, 이 말은 브라우저 환경이 아닌 node 등에서 JS 코드를 실행하면 document object를 이용할 수 없다는 말이예요.
리모컨을 통해서 손으로 TV를 조작할 수 있는 것처럼,
DOM(리모콘) 덕분에 우리는 JS(손)를 이용해서 웹 페이지(TV)를 컨트롤 할 수 있게되는 것이죠.
참고 자료
