DOM이란?

리액트의 virtual DOM에 대해 열심히 공부한 도디,
DOM에 대해 급 호기심을 갖게 되는데…
많은 개발 블로그에서 DOM을 설명할 때, 질문으로 답을 결론내더라..

• 내가 작성한 HTML 파일이 DOM인가? No
• 소스보기에 보여지는 것들이 DOM인가? No
• 크롬 개발자 도구에서 보여주는 것들이 DOM인가? Yes

내가 작성한 HTML 코드와 개발자 도구에서 보여지는 코드가 같아 보이지만, 사실 다르다.

• HTML 작성할때 실수(필요한 TAG를 생략 한 경우 등)를 브라우저가 고쳐준다.
• 예를 들면 HTML 작성시 <table>안에 <tbody>없이 <tr>,<th>를 사용한 경우 개발자 도구를 보면 <tbody>가 존재한다. <tbody>는 바로 DOM에 있을것 이다.
• 따라서 CSS, JavaScript로 찾을 수 있고 스타일을 변경하거나 조작이 가능하다.

JavaScript vs DOM

JavaScript는 브라우저가 읽고 사용하는 언어입니다.
하지만 DOM은 그 일이 일어나는 곳입니다.

결론

DOM은 브라우저내에서 작동하고 존재한다.
DOM은 파싱 된 HTML이라고 말할 수 있습니다.
웹페이지가 로드되면 브라우저는 DOM 페이지을 만든다.