처음부터 무슨 말인가 싶겠지만, 이 결론을 미리 보시면 이해에 도움이 될 거예요.
다시, 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)를 컨트롤 할 수 있게되는 것이죠.