1. DOM이란?

입력한 코드가 실제로 유저에게 보여지는 화면

1) 정의

• Document Object Model의 약자로 브라우저가 렌더링되면 HTML이나 XML문서를 실체화하는 API를 말한다.
• 예를 들어 input태그를 입력하면 브라우저는 input을 유저가 볼 수 있는 길고 무언가를 입력할 수 있는 창으로 실체화한다.
• HTML라는 코드로 구성된 웹페이지가 브라우저 안에서 기능들을 수행할 수 있는 객체들로 실체화된 형태이다.

2) 렌더링이란?

• HTML,CSS,JS 코드가 화면에 출력되어 유저에게 보여지기까지의 과정을 말한다.

2. CSS와 JS와 관계

1) CSS

• DOM은 HTML이 실체화된 형태이고 CSS는 CSSOM이라는 것으로 구성되므로 다르다.
• 브라우저 렌더링 과정에서 DOM과 CSSOM이 합쳐져서 Render트리를 구성하므로 DOM과 CSS는 관계없다.

2) JS

• DOM을 사용해서 웹 화면을 보여주고 필요에 따라 자바스크립트로 DOM을 조작할 수 있기에 자바스크립트가 DOM요소라고 할 수는 없다.
• DOM의 요소에 자바스크립트가 포함되지는 않지만 자바스크립트로 제어할 수 있는 대상이라는 얘기이다.