출처 : https://www.w3schools.com/js/js_htmldom.asp

HTML DOM이란?

웹 페이지가 다운로드 되면, 브라우저는 스스로 페이지의 문서 객체 모델(DOM)을 생성합니다.
HTML DOM 모델은 트리의 구조를 가집니다.

객체의 HTML DOM 트리입니다.

객체 모델을 가지고, 자바스크립트는 동적 HTML 페이지를 만드는데 필요한 모든 힘을 얻을 수 있게 됩니다.

• 자바스크립트는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
• 자바스크립트는 페이지의 모든 HTML 속성을 변경할 수 있습니다.
• 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.
• 자바스크립트는 기존하는 HTML 요소와 속성을 제거할 수 있습니다.
• 자바스크립트는 새로운 HTML 요소와 속성을 만들어낼 수 있습니다.
• 자바스크립트는 기존하는 모든 HTML 이벤트에 대응할 수 있습니다.
• 자바스크립트는 페이지에 새로운 HTML 이벤트를 만들 수 있습니다.

한마디로 요약하면, 자바스크립트로 CSS, HTML의 모든걸 제어할 수 있다는 말입니다.

자바스크립트는 Node.js처럼 코드 그 자체로도 무언가를 만들어낼 수 있지만, 가장 핵심적인 기능은 HTML 페이지를 동적인 페이지로 만들어내는 것입니다.

DOM

돔 자체의 어원은 W3C 표준으로, 플랫폼, 그리고 언어 중립적 인터페이스인데, 프로그램과 스크립트들이 문서의 내용물, 구조, 스타일 등을 동적으로 접근하고 업데이트할 수 있도록 해주는 것을 말합니다.

W3C DOM은 세가지로 나뉘는데,

• Core DOM : 모든 문서 타입의 표준모델입니다.
• XML DOM : XML 문서의 표준모델입니다.
• HTML DOM : HTML 문서의 표준모델입니다.

HTML DOM은 HTML 을 위한 표준 객체모델과 프로그래밍 인터페이스입니다.

HTML DOM은

• 객체로서의 HTML 요소
• 모든 HTML 요소의 속성(Properties)
• 모든 HTML 요소에 접근할 수 있는 방법(Methods)
• 모든 HTML 요소를 위한 이벤트(Events)
  총 4가지를 정의합니다.

바꿔 말해서, HTML DOM은 HTML 요소를 어떻게 얻고, 바꾸고, 추가하고, 또 삭제할지에 대해 정해놓은 표준이라고 할 수 있습니다.