DOM (Document Object Model)
간단한 웹페이지를 만들면, 브라우저에서는 body태그, section 태그 등 각각의 태그들을 분석해서 이것을 노드로 변환한다.
즉, 브라우저가 가지고 있는 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환 시킨다. 당연히 오브젝트 안에는 태그 안에 작성했던 클래스라던지 텍스트 같은 모든 정보들이 포함되어져있다.
참고 : https://developer.mozilla.org/en-US/docs/Web/API/Node
즉, 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.
즉, head안에 meta,title , link 등의 태그들이 있다면 DOM트리 내에도 그에 상응하는 요소가 존재한다.(HTMLMetaElement, HTMLTitleElement..)
HTMLElement 안에는 어떤 태그를 쓰냐에 따라 HTMLInputElement가 될수있고, HTMlImageElement가 될수있다. 즉, 모든 태그의 요소들은 각각 HTML 태그의 Element이고, HTMLElement는 결국 Element이고, Element는 Node이다.
이때까지 window나 document나, button, 태그들을 querySelector을 이용해서 변수에 할당하여 사용해왔다. 이때 할당한 이 변수가 HTMLElement 일수도 있고, Document일 수도 있지만, 결국 이 모든 아이들이 결국은 Node이고, 또 Node는 EventTarget 이기때문에 EventTarget에서 지원해주는 API를 사용할 수 있는 것이다.
자주 사용하는 addEventListener() 도 EventTarget 오브젝트 내에 있는 메서드이다.
참고 : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
위 그림에서, window라는 글로벌 오브젝트 아래에 ‘DOM’ (Document Object Model’이 있는걸 확인할 수 있다.
EventTarget에는 총 세가지의 Methods가 있는것을 확인할 수 있는데,
이를 통해 이때까지 window, document 혹은 element에 사용했던 addEventListener는 EventTarget으로부터 상속받은거라고 할 수 있다.
(즉, 모든 Element(HTMLElement) 는 Node이고, Node는 EventTarget이기때문임)
