DOM의 개념, API, Rendering 이란?

 

문서 객체 모델(DOM)

 

문서 객체 모델(DOM, Document Object Model)은 HTML 문서를 객체화한 것입니다. (인터페이스)

 

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

 

이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

 

 

 

 

Javascript에서 HTML을 가져오기 위해 만든것이 DOM이다.

 

그러므로 Javascript는 DOM을 이용하여 새로운 HTML / 기존의 HTML의 요소를 생성, 변경, 삭제를 할 수 있다.

 

 

 

 

 

---

 

 

API (Application Programming InterFace)

 

API = 다른 사람이 자신의 소스를 쉽게 사용할 수 있도록 함수를 만들어 놓은 것

• HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

만약 어떤 기능이 필요하다면, 온라인에서 다운로드 후 API 사용 가능하다.

 

 

 

요소의 선택

 

document = HTML 요소

 

API 메소드 : 색 부분

 

document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

 

 

HTML 요소의 생성

 

document = HTML 요소

 

API 메소드 : 색 부분

 

document.createElement(HTML요소)	지정된 HTML 요소를 생성함.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력함.

 

 

 

---

 

Rendering

- rendering engine

1. Viewport(화면)에 HTML을 그리는 역할
2. 추가적으로 CSS, Javascript를 적용