DOM

✏️ DOM - Document Object Model

브라우저가 응답받은 HTML 을 Parsing (해석) 했을 때 나오는 결과를 DOM 이라고 한다.

• 브라우저가 HTML 파일을 해석하면 트리형식의 DOM 을 만들어 낸다.
• DOM 트리의 구성 요소 하나하나를 Node 라고 부른다.
• DOM 트리의 가장 상위 Node 는 document 이고,
  두번째 Node 는 이다.
  - Node 에서 , Nod 로 나눠지고 계속해서 트리형식으로 나누어짐
• Node 의 정보 형식은 모두 API 형식이다.

⚠️ DOM 외에도 브라우저에서 프로그래밍 할 수 있도록 BOM 을 제공한다.

• Browser Object Model
• 다른 페이지로 이동, 화면 관련 정보 조회, 브라우저에 알림창을 팝업, AJAX 요청 등등 을 담당한다.
• 브라우저에서 제공하는 모든 것을 통틀어 Web API 라고 통칭 한다.

✏️ Java Script 의 작동 방식

• 브라우저는 필요한 웹 페이지를 서버에 요청하고 HTTP 형식으로 응답 받는다.
• 응답받은 HTTP body 의 HTML 을 해석해 DOM 으로 만든다.
• Java Script 는 최상위 Node 인 document 를 호출한다.
• document 의 함수에 따라 특정 Node 에 API 형식으로 매개변수를 전달해 변화시킨다.

✏️ HTML 요소들의 상속도

• 모든 요소들은 최상위 카테고리인 EventTarget 을 상속한다.
  • EventTarget 은 키보드 입력, 드레그, 클릭 등 기본적인 기능을 담당한다.
• HTML 요소는 HTMLElement 하에서 상속된다.
• java Script 의 document 함수들은 Document 카테고리의 고유 기능이다.
• 글짜를 바꾸는 기능을하는 textContent 같은 함수는 Node 카테고리의 기능이다.
  • 즉 Node 하위에 위치한 HTML tag 들은 모두 이 기능에 영향을 받는다.

  EventTarget
       |
      node
    /      \
Element   Document
  |
HTMLElement
 | | | | |
HTML 의 각각의 tag 들