개발 노트

DOM은 무엇인가 본문

JavaScript

DOM은 무엇인가

알 수 없는 사용자 2022. 1. 2. 17:23

Dom은 한마디로 무엇인가

-> html이나 xml문서를 실체로 나타내는 api

 


dom을 알아보기 전에


웹브라우저는html문서를 해석하고 화면을 통해 해석된 결과를 보여준다.
해석한 html 코드를 화면을 통해 보여주는 과정을 렌더링이라고한다.

렌더링의 세부 과정
브라우저는 html코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 dom이라 하며, 브라우저는 dom을 통해 화면에 웹 콘텐츠들을 렌더링한다.



dom의 존재 목적


dom은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.





-> 내용정리

 

 

Document(Document Object Model)

JS를 이용해 엘리먼트의 속성 값을 다루는 방법 이라고 할 수 도 있고

HTML문서의 구조와 관계를 객체로 표현한 모델 이라고 할 수 도 있겠다

 

DOM은 DOCUMENT OBJECT MODEL 의 약자이다.

웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용 될 수 있게 연결시켜주는 역할을 담당한다.

DOM은 DOCUMENT라는 전역변수로 접근이 가능하다

DOM을 가지고 있는 언어 중의 하나에 자바스크립트가 있는 것이고 다른 언어도 DOM을 가지고 있지만 자바스크립트의 DOM이 전통적으로 오래 쓰여왔고 안정적이다.

JS를 통해 HTML의 구조 관계인

DOM 구조에 접근할 수 있을 뿐이지 DOM은 자바스크립트가 아니다.

 

 

DOM은 Tree 구조로 되어있다.

 

HTML은 그 자체로 트리구조를 가지고 있다.

트리구조는 쉽게 말해 부모자식을 갖는 관계인데 html. 안에 body 그 안에 div 등 html은 트리구조로 작성을 한다.

저버스크립트도 객체라는 개념이 있기 때문에 부모 자식 관계를 가질 수 있는 언어이다.

 

 

 

[DOM]
html코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 형식
dom은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가 수정, 삭제하거나 이벤트르 처리할 수 있도록 프로그래밍 인터페이스르 제공한다.
실제 dom은 무거우니까 가상dom으로 잘 배치한다