[TIL] JavaScript - DOM

서론

JavaScript를 공부하면서 DOM이 뭐냐는 질문을 들었을 때, 바로 대답이 안 나왔습니다...

DOM을 항상 사용하면서 뭐냐는 질문이 들어오면 선뜻 대답하지 못하는 제 자신을 보고 아직 한참 멀었다는 것을 느끼게 되었습니다

그래서 다시 공부해보려 합니다!!

 

DOM이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

출처: MDN

 

JavaScript가 생긴 이유?

우선 Dom을 알기 전에 JavaScript가 왜 생겼는지 먼저 알아봅시다.

 

1. 브라우저에서 쓰기 위해 생겼습니다.

**브라우저에서 쓰기 위해 만들어졌지만, 시대가 지날수록 하드웨어 성능이 발달하면서 연산처리 속도가 향상되었습니다.

그로 인해 다른 언어들도 메모리에 신경 쓰지 않을 만큼 시대가 발전하였고 JavaScript 또한 브라우저뿐만 아니라 다른 곳에도 사용될 준비가 되어 node.js형식으로 다른 곳에서도 사용이 됩니다.

 

2. 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML 문서를 조작해 생명력을 불어넣기 위해서 만들어진 언어입니다.

 

웹 페이지가 뜨는 과정

a. www.google.com   ( 클라이언트 -> 서버 )  

b. HTML 문서를 수신 ( 서버 -> 클라이언트 )

c. 브라우저가 HTML 파일을 해석 ( parsing )

1. 브라우저에는 기본적으로 랜더링 엔진이 존재합니다.
2. 랜더링 엔진이 HTML 문서에 코드를 보면서 해석합니다.

d. DOM Tree를 구성합니다.

 

 

e. HTML에 CSS가 포함되어있으면 CSSOM Tree를 구성합니다.

 

 

f. DOM Tree와 CSSOM Tree를 묶어서 Render Tree를 구성합니다.

 

 

그래서 DOM이 뭐라고?

a. Documet ( HTML 파일 )를 JavaScript가 알 수 있는 Object의 형태로 Modeling 한 것입니다.

b. 브라우저에 기본적으로 내장되어 있는 API

• chrome browser 개발자 도구에서 사용할 수 있습니다. ⭕
• VSCode에서 node.js로 실행할 시 사용할 수 없습니다. ❌

c. DOM이 브라우저에 내장되어 있기 때문에 우리는 HTML의 내용을 JavaScript로 접근/제어할 수 있습니다.

d. 모든 DOM의 node들은 '속성' 과 '메서드'를 가지고 있습니다.

document.getElementById("demo").innerHTML = "Hello World!";
//getElementById => 메서드
//innerHTML => 속성값

 

함수와 메서드의 차이!

//메서드 -> 호출의 주체가 있음
person.getAge();

//함수 -> 호출의 주체가 없음
testLog();

 

마치며...

이제 누군가 DOM에 대해 묻는다면...