돔(DOM) 이란 무엇인가

브라우저는 HTML, CSS를 해석해서 HTML 엘리먼트 하나하나들을 트리 형태로 구조화 해놓는다. 이것을 DOM TREE라고 한다. 이 DOM TREE는 자바스크립트가 웹사이트를 조작하기 위해서 사용하는 객체이다.

쉽게말하면, 우리가 HTML을 작성하면 그건 말그대로 그냥 언어일뿐이고 이것이 브라우저의 해석을 거쳐 객체로 변환되면 그것을 DOM이라고 한다. 웹사이트에서 F12를 누른뒤 Elements탭에 가면 나오는 코드들이 DOM이다.

브라우저에 의해서 해석된 HTML이기 때문에 패딩은 몇이고 마진은 몇이고 폰트 사이즈는 몇이고 이런것들을 알아낼 수 있는것이다.

Document객체

브라우저에 포함된 내장객체이다.

웹사이트에 접근, 수정하기 위해서 필요한 속성들과 메소드들을 다수 가지고 있다.

콘솔에 document를 입력하면 elements탭에서 봤던것과 같은 DOM들이 나온다.

HTML 소스코드와 DOM의 차이

얼핏보면, 둘의 차이가 없는거처럼 보인다. 하지만 아래 두가지 경우에 둘은 확실히 다르다.

1. 자바스크립트에 의해 DOM이 수정된 경우 (HTML vs DOM 다름)
2. 브라우저가 자동으로 에러를 잡아준 경우 (HTML에는 에러 있지만, DOM에는 에러 자동 보정됨)

1. 자바스크립트에 의해 DOM이 수정된 경우

브라우저 콘솔에서 다음을 입력해보자.

document.body.style.backgroundColor = "purple"