DOM이 뭔데?

DOM ?

Document Object Model 의 약자

Document(HTML)를 JavaScript가 알아먹을수 있는 Object형태로 Modeling 한것.

 

웹페이지가 뜨는 과정

1. 사용자가 브라우저에 'www.naver.com' 주소를 입력한다.

• 사용자 = 브러우저 = 클라이언트
• 클라이언트가  서버에 요청을 한다 (크롬을 통해)

2.html문서를 서버로부터 수신한다

• 네이버에서는 사용자에게 응답을 준다.
• 그 응답을 HTML문서 (document)라 한다.

3.브라우저가 HTML파일을 해석(파싱)한다.

• 브라우저에게는 기본적으로 렌더링 엔진이 있는데, 서버가 클라이언트(사용자)에게 준 html문서를 렌더링(해석) 한다.

서버로 부터 받아온 html문서를 자바스크립트가 해석할수 없기 때문에 렌더링 과정이 필요하다!

 

4.자바스크립트가 알아들을수있도록 해석한 내용을 토대로 DOM TREE를 구성한다.

 

5. Render Tree를 구성

• Render Tree : HTML, CSS, JavaScript문서를 파싱하여 브라우저에 실제로 랜더링 되는 최종 문서 모델을 나타내는 객체의 계층구조.
• 브라우저 화면에 그리기 위한 최종 버전을 만들어 낸다.

API? DOM API?

다른시스템에서 데이터나 서비스를 요청할때 API는 해당 시스템과 사용자 간의 인터베이스 역할을 한다.

• 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면 앱은 해당 기능을 제공하는 날씨 서비스의 API를 호출하여 날씨 정보를 받아온다

쉽게 말해 다른 시스템에서 제공하는 기능을 사용할수 있도록 도와주는 중간자 역할을 한다. 브라우저 역시 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM객체에 접근할 수 있도록 도와준다.

 

DOM에 접근 및 제어 해보기

 

자바스크립트는 이런식으로 html 요소에 접근할수있다.

• document.querySelector("#test")
• document.getElementById("test")

DOM은 노드로 이루어져 있기 때문에 부모노드 - 자식노드관게 로 이루어져 있다.

이렇게 속성을이용해서 부모/자식 요소에도 접근이 가능하다.

 

DOM의 노드들은 속성과 메서드를 가진다.

document.getElementById("demo").innerHTML = "Hello World!";

 

메서드 : getElementById() 

속성 : .innerHTML

 

document 관련 api로 요소를 선택, 수정, 추가, 삭제 하는 기능과 이벤트 처리기능을 제공하고 있으니 이를 활용해 다양한 작업을 처리할수 있다는것을 알아두자!!