DOM
2023. 3. 21. 16:44ㆍFrontEnd/JavaScript
✅ 아래 내용들에 대해서 알아보자
- DOM란?
-
DOM란
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다.
문서 객체란 <html>이나 <body>와 같은 html 문서의 태그들을 js가 이용할 수 있는 객체로 만든 것을 의미함
즉, DOM이란 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체모델이다.
DOM은 트리 구조로 구성되어 있다.(Root node : 부모 노드, Leaf 노드 : 자식 노드)
여기서 node란 head, body, title, script 등 태그뿐만 아니라 텍스트, 속성을 node라고 말한다.
아래 그림처럼 DOM이 JavaScript와 HTML/CSS 서로 유기적으로 연결하는 역할을 하게 되고 그로 인해 JS는 DOM model로 웹 페이지에 접근하고 페이지 수정이 가능하게 된다!
어떻게 JS가 HTML 문서에 접근할 수 있을까??
JS의 document 전역개체를 통해 HTML을 접근할 수 있고, document 객체는 dom 트리의 root node에 접근하는 포인 이고, document 객체는 HTML 문서를 그 자체를 나타내게 되는것이다.
콘솔창에 window.document 를 치게 되면 아래 그림처럼 나온다. 즉, document 객체를 통해 HTML 문서에 접근이 가능하게 된다.
참고자료
반응형