DOM이란??

Document Object Model

HTML과 자바스크립트가 서로 소통할 수 있도록,
HTML을 객체 형태로 파싱하여 자바스크립트 객체로 변환시킨 모델이다.

직접 코드를 입력해서 DOM구조를 확인해봤다.
console.log(document)

실행 결과

객체의 자손에 접근하기 위해서는 .(속성) 을 붙이면 된다
console.log(document.title)

실행결과

왜 객체 모델로 파싱하는걸까?

HTML와 같이 단순한 텍스트 파일을 브라우저에 렌더링하기 위해서는 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 그 구조가 DOM인 것!

HTML 문서 내의 모든 구성 요소, 즉 요소(element), 속성(attribute), 텍스트 내용(text) 등은 DOM에서 노드(node) 로 나타난다.

DOM은 HTML 문서의 계층적인 구조를 정확하게 반영하며, 요소들이 부모, 자식, 형제 관계를 가지고 있는 트리 구조로 표현된다.

노드는 JavaScript 객체로 표현되며, DOM을 통해 이러한 노드에 접근하고 조작할 수 있다.

DOM 이 그래서 왜 필요하다고??

HTML은 웹 페이지의 정적인 내용을 정의한다. 즉 동적으로 내용을 변경하거나 그 자체만으로 유저와 상호작용을 할 수는 없다.

DOM이 존재함으로써 Javascript는 HTML 태그들을 수정할 수 있게 되었다.

예시

• HTML 요소 선택
  ex) document.getElementById() document.querySelectorAll()
• HTML 요소 생성
  ex) document.createElement()
• HTML 이벤트 핸들러 추가
  ex) document.getElemenById().onclick=function(){ // }
• HTML 자식 요소 추가 ex) document.appendChild()