DOM

브라우저 객체 모델(Browser Object Model, BOM)

- 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있음
-  이 브라우저와 관련된 객체 집합 (브라우저 자체 제어)
- DOM은 BOM 중 하나
- BOM의 최상위 객체는 window객체
ex.  window.location - window.navigator - window.screen - window.history - …
다른 웹페이지 이동, 화면 관련 정보 습득, 브라우저의 알림창 띄우는 등등 기능 존재
- DOM은 window 객체의 하위 객체 ( window.document 객체를 DOM이라고 분류한다. )
 

---

 

문서 객체 모델 (Document Object Model, DOM)

- W3C(World Wide Web Consortium) 표준으로, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
- 간단하게, 스크립트 언어로 HTML 요소를 제어할 수 있도록 웹문서를 객체화한 것

window.document		// DOM

window.lacation		// BOM . . .
window.navigator
window.screan
window.history
// ...

●   우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석한다. 이 브라우저가 HTML코드를 해석하는 과정을 ‘파싱’이라 부른다.파싱 결과물을, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면에 보여주는 과정이 렌더링이며, 결과물로 DOM이 만들어진다.
 
●  브라우저는 HTML 코드를 해석하여, HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성한다.
이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
 
- 아래 그림을 DOM Tree라고 하며, 각각의 요소를 Node라고 한다.
 

- 자바스크립트로 웹 페이지 요소를 제어할 수 있는 것은 이것들 하나하나가 모두 API이기 때문이다.
※ API : API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추상적인 원칙.
(애플리케이션을 서로 연결해서 서로 통신할 수 있도록 하는 인터페이스 원칙이라고 생각하자!)
 

---

 

Critical Rendering Path

- 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정
(즉, 웹페이지가 만들어지는 과정)
 
- DOM트리 구축
  - CSSOM 트리구축
  - JS 실행
  - 렌더 트리 구축
  - 레이아웃 생성
  - 페인팅
 
●  렌더트리 구축 기점으로 간소화하면 2단계로 나누어짐
1단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다.
(렌더트리 생성됨)
2단계 : 브라우저는 해당 렌더링을 수행한다.
 
※ 렌더 트리 : 웹 페이지에 표시될 HTML, 스타일 요소로 구성된다. 브라우저는 렌더트리를 생성하기 위해 두 모델을 필요로 한다.
- *DOM(Document Object Model)* : HTML 요소들의 구조화된 표현
  - *CSSOM(Cascading Style Sheets Object Model)* : 요소들과 연관된 스타일 정보의 구조화된 표현
 

---

DOM의 목적

●   DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다.
즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다는 뜻이다.
 
   - 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용된다.
  - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
  - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
   - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
  - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
  - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
   - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
  - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다
 
●   HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.
 

DOM의 종류

- W3C DOM 표준은 세 가지 모델

●  Core DOM : 모든 문서 타입을 위한 DOM 모델

●  HTML DOM : HTML 문서를 위한 DOM 모델
- HTML 문서를 조작하고 접근하는 표준화된 방법을 정의
 
- 모든 HTML 요소는 HTML DOM를 통해 접근 가능

●  XML DOM : XML 문서를 위한 DOM 모델
- XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의
- 모든 XML 요소는 XML DOM를 통해 접근 가능
 
-  XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의
- 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용 가능
 

HTML DOM Document

● Finding HTML Elements

Property	Description
document.getElementById(id)	주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
document.getElementsByTagName(name)	엘리먼트의HTMLCollection 과 주어진 태그명을 반환
document.getElementsByClassName(name)	주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환

 
● Changing HTML Elements

Property	Description
element.innerHTML= new html content	요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정
element.attribute = new value	HTML의 지정된 요소의 속성 값을 설정
element.style.property = new style	HTML 요소의 스타일을 설정

Method	Description
element.setAttribute(name, value)	HTML 요소의 속성 값을 설정하는 메서드 속성이 없다면 지정된 이름과 값으로 새 속성이 추가됨. (이 외 여러가지 메서드가 존재)

// HTML
<button>Hello World</button>

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

● Adding and Deleting Elements

Property	Description
document.createElement(element)	HTML 요소 생성
document.removeChild(element)	HTML 요소 제거
document.appendChild(element)	HTML 요소 추가
document.replaceChild(new, old)	HTML 요소 대체
document.write(text)	document.open()에 의해 열린 문서 스팀에 텍스트 스트링을 적는다.