DOM (Document Object Model)
DOM이란, 브라우저가 서버에게 요청하여, 응답으로 받은 웹 문서(HTML, XML, SVG 등)를 브라우저의 렌더링 엔진이 로드하고, 파싱하여 브라우저가 이해할 수 있는 형태로 구성된 것을 말한다. 이 DOM은 자바스크립트를 이용해 동적으로 변경이 가능하고, 이 변경된 DOM은 렌더링에 반영된다. 이때, 자바스크립트로 이 DOM에 접근하고 수정할 수 있는 DOM API가 있으며, 이 DOM API가 가지고 있는 프로퍼티와 메소드로 정적인 웹페이지에 접근하여 동적으로 변경할 수 있다.
DOM은 W3C의 공식 표준이고, HTML, JavaScript에서 정의한 표준이 아니다.
html 태그를 이용하면, 브라우저에서 html 파일을 읽어서 사용자에게 보여주는 데, 브라우저는 이때 자바스크립트만의 Object로 변환하게 된다
그래서 각각의 HTML 태그들을 자바스크립트 Object로 변환 후, 메모리에 보관하는 형태이다.
따라서 변환된 각각의 태그들을 "Node" 라고 불린다.
또, Node는 EventTarget을 상속한다. 그래서 EventTarget 안에 있는 함수들을 Node에서 사용 가능하다. addEventListener 와 removeEventListener 등을 사용 할 수 있다.
( EventTarget 안에는 콜백 함수를 등록할 수 있는 이벤트리스너가 있다. )
DOM TREE
EventTarget > Node > Element
위의 Node는 Element 들의 최상위이다.
Element에는 HTMLElement, HTMLInputElement, 등등 다양한 요소들이 있다.
모든 html 태그들을 그에 상응하느 HTML..Element 형태의 Object로 변환이 된다.
EventTarget > Node > Element 순으로 상속이 되어지며 최종적으로 위의 표와 같이
DOM Tree가 완성이 된다.
document.querySelector
document.querySelector 를 이용하면 기본적인 타입은 Element이기 때문에, Element를 상속하는 모든 자식 요소를 리턴할 수 있다.
그 말은 즉슨, DOM Tree에 있는 요소 중에서 원하는 것을 가지고 오고 싶다면 원하는 요소에 querySelector를 이용하면 특정 태그를 가진 것들을 가져올 수 있다.
REFERENCE
