1.문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
출처

쉽게 생각하면
자바스크립트에선 html언어를 직접 해석하고 조작할 수 "없다"
따라서
자바스크립트가 html을 해석 할 수 있는 문법으로 변환을 한다면?
(array나 object 형식으로 담아서 전달해주거나?)
원하는 자료들을 html에서 조작할 수 있을듯?
즉
자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을
object 자료로 정리한걸 DOM이라고 한다.

2. 특징

• 브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성
  -자바스크립트는 DOM이 생성된 경우에만 HTML을 변경할 수 있다.
  -혹은 html코드를 먼저 읽게하고 js를 실행하도록 하게 할 수 있다.
  "addEventListener('DOMContentLoaded')"같은걸로
  -요즘은 그냥 자바스크립트를 태그 끝나기 전에 전부 작성하기 때문에 안해도..

3. 요약정리

DOM은 HTML 문서에 대한 인터페이스
첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

• 항상 유효한 HTML 형식입니다.
• 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
• 가상 요소를 포함하지 않습니다. (Ex. ::after)
• 보이지 않는 요소를 포함합니다. (Ex. display: none)
  참고자료