DOM은 무엇인가?
Browser, HTML, DOM의 관계
DOM을 풀어서 쓰면 Document Object Model이라고 한다.
여기서 Document는 HTML문서를 말하는데, 각 Browser들은 HTML 안에 담겨있는 구조에 맞춰 DOM을 생성한다.
비유하자면 HTML은 설계도, Browser는 공장, DOM은 설계대로 만들어진 제품이라고 볼 수 있다.
이렇게 생성된 DOM은 어떤 역할을 하는가?
해당 HTML로 설계된 웹페이지가 브라우저 안에서 화면에 나타날 것인데, 이 때 웹페이지에서 click, input 등 여러 이벤트를 수행하게 해 준다.
DOM을 통해 웹 화면을 보여주고, 자바스크립트 등의 언어로 DOM을 조작할 수 있다.
DOM의 구조와 조작
DOM은 트리 구조로 되어있으며, HTML의 모든 요소들(div, span, a ...)은 트리를 구성하는 노드의 상속을 받는다.
또한, 노드는 클릭 등의 이벤트가 가해지는 EventTarget이기도 하다.(노드는 EventTarget의 상속을 받는다.)
그래서 addEventListener와 같은 기능을 갖고있어 우리가 특정 요소에 event를 주고 출력해 보았을 때 항상 볼 수 있는 속성들(ex. textContent, childNodes, firstChild ...)을 가지고 있다.
DOM을 조작할 수 있는 이유는 DOM이 API로 이러한 속성들을 가지고 있기 때문이다.
URE