웹 프론트엔드에서 자바스크립트를 사용하려면 DOM이란 개념을 제대로 알고 있어야 하지.
DOM(Document Object Model)은 웹페이지에서 자바스크립트 요소들을 제어하는데 사용된다.
document 객체가 브라우저 환경에서만 접근이 된다는건 그게 애초에 자바스크립트 자체의 요소가 아니라 브라우저란 환경에서 제공되는 것이라고 생각할 수 있죠.
사실 웹개발에서 사용되는 document 객체는 브라우저에서 제공하는 window 객체의 한 요소야. 그리고 이 window.document 객체를 DOM으로 분류하지.
브라우저는 DOM 말고도 사용자가 브라우저에서 일어날 일들을 프로그래밍 할 수 있도록 BOM(Browser Object Model)을 제공함. 다른 웹페이지로 이동하거나 화면 관련 정보를 얻거나 브라우저의 알림창을 띄우거나 AJAX 요청을 보내는 등 수많은 기능들이 있다.
이 기능들을 통틀어서 DOM과 BOM을 Web API(웹 API)라고 부른다. Web API는 자바스크립트의 기능은 아니지만 자바스크립트 등을 통해 제어될 수 있도록 브라우저에서 제공되고 있다.
MDN 사이트들의 DOM이나 Web API 항목을 둘러보시면 이들에 대해 자세히 알아보실 수 있으실거에요.
DOM은 아래의 트리 전체를 말한다. 그리고 이를 구성하는 부품들, 요소 하나하나를 NODE라고 한다. 우리가 자바스크립트로 웹페이지의 요소들을 제어할 수 있는 건 이것들 하나하나가 모두 API(Application Programming Interface)가 때문이다.
DOM 요소들의 고유기능은 상속관계 개념이 적용.
EventTarger은 그 이름에서 유추할 수 있듯 어떤 이벤트들의 대상이 된다는 것임 클릭이나 드래그, 키보드 입력, 요소 로드 등으 이벤트들을 말한다.
상위 요소의 기능일수록 하위 요소를 움직이게 할 수 있다.
예를 들어 EventTarget의 기능은 Node, Document 및 Element 하위에서 모두 사용할 수 있으며 Document의 기능은 Element에서 작동하지 않는다.
