영상 후기 - 웹개발 필수개념! DOM이 뭔가요? (+ Web API)

 

웹페이지에서 자바스크립트로 요소들을 제어하는데 사용되는 Document Object Model을 말하는것이다

 

document라는 객체는 브라우저에서만 접근이 된다는건 그게 애초에 자바스크립트 자체의 요소가 아니라 브라우저라는 환경에서 제공되는 것이라고 생각하면 된다. 

 

웹개발에서 사용되는 document 객체는 브라우저에서 제공되는 windows 객체의 한 요소이다.  그리고 window.document 객체를 DOM이라 분류한다. 


우리가 웹사이트에 접속하면 브라우저는 HTML문서를 읽어들인다. HTML코드가 어떤제품의 설계도라면 브라우저는 공장이다. 공장에서는 이 설계도를 해석하는 과정을 거치는데 이를 파싱이라고 부른다. 그리고 그 결과물로 DOM이라는 기계가 만들어진다. 정리하자면 HTML이란 설계도를 브라우저란 공장에 보내면 DOM이라는 기계가 만들어진다고 비유할 수 있다. 

 

DOM이란 기계를 만드는 이유
HTML요소가 트리형식으로 반영이 되면서 DOM은 트리 전체를 말한다. 이를 구성하는 부품들 head body title 이런것들을 노드라고 부른다. 우리가 자바스크립트로 웹페이지의 요소를 제어할 수 있는건 노드들 하나하나가 다 API이기 때문이다. 

 

DOM의 역할
document.getElementById("title")에서 document는 트리에서의 document이다.  document에는 getElementById란 버튼, 즉 기능이 있는데 이건 DOM내에서 주어지는 Id 여기서는 title을 가진 노드 그 부품을 가져오는 기능을 실행한다. 즉 DOM과 그부품들이 API란게 이런것이다. 

 

 

결론

DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다. 즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다. 그래서 HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.