Javascript (1) DOM

TeetyWoo·2021년 7월 9일

Javascript

목록 보기
1/3

Document Object Model

= html을 객체 자료형으로 모델링 했다

Document : 웹개발에서 document라는 단어는 html에 대해 이야기 하는 것
Object : 객체 자료형

html은 확장자가 html이니까 당연히 javascript가 못 읽는다!
(확장자가 다른 한글을 word로 못읽는 것 처럼)
html을 javascript가 이용할 수 있는 obejct로 만들어서 주는게 DOM이다.

= DOM은 브라우저에 기본적으로 내장되어 있는 API이다.

API : Application programming interface
inter(상호작용) face(면) : 즉, 서로 상이한 구조를 가지고 있는 것들끼리 서로 커뮤니케이션 할 수 있도록 도와주는 것!
Browser : 웹페이지, 이미지, 비디오등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어. 서버로부터 데이터를 전송받고, 렌더링 엔진을 사용해 이를 텍스트 및 이미지 등으로 변환한다.

CSS도 CSSOM이라는 API를 통해 JavaScript가 이해할 수 있는 형태(객체)가 됨

즉, 맡은 역할, 언어Syntax 모두 다른 HTML, CSS, JavaScript가 DOM API 덕분에 브라우저에서 대동단결 할 수 있게 됨


HTML 문서는 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 개체들의 트리구조로 변환된다. (개발자 도구의 elements 창에서 볼 수 있다.)

DOM의 목적은 JavaScript를 사용해서 이 문서에 대한 스크립트 작성(삭제, 추가, 바꾸기, 이벤트 처리, 수정)을 위한 프로그래밍 인터페이스를 제공하는 것이다.


참고 유튜브
[김버그] DOM이 뭐죠?

참고 블로그
[godori] DOM이란 무엇인가?
[heecheolman] 웹 브라우저의 역사
[휘] 브라우저란 무엇이며 어떻게 작동할까?

참고 서적
[코디린들리] DOM을 깨우치다

0개의 댓글