#13 자바스크립트 DOM 이해하기

https://www.notion.so/simsimjae/13-DOM-27569f529fe74c49b0353277ca0476f0

아래 글들은 검색엔진 노출을 위한 글입니다. 

노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment)

---

제가 직접 만든 프로젝트입니다.

http://pickvs.com : 닥전닥후

---

돔(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"

그럼 아래와 같이 body 태그의 배경색이 보라색으로 변한다.

 

이런 경우에 HTML 소스코드와 DOM이 서로 다르다는것이다.

HTML 소스코드는 정적이지만 DOM은 동적이다.

페이지를 새로 고침해보면 배경색이 원래대로 돌아온다. 왜냐면? 새로고침을 하는 순간 브라우저가 HTML 소스코드를 다시 해석해서 새로운 DOM TREE를 다시 구축하기 때문이다. 콘솔 또는 Elements탭에서 수정한 사항들은 일시적으로만 반영 될 뿐이다.

2. 브라우저가 자동으로 에러를 잡아준 경우

브라우저가 자동으로 에러를 잡아주는 예시는 다음과 같다.

1. 태그를 열기만하고 안닫았을 때
2. 테이블 태그 내에 tbody태그를 넣지 않았을 때

이런 경우에, 브라우저가 HTML을 해석하는 과정에서 에러를 자동으로 잡아주고 그 결과 HTML 소스코드와 DOM이 달라지게 된다.