DOM - DOM과 JavaScript
11 Nov 2020 -
Less than 1 minute read
DOM
Document Object Model
- HTML, XML 문서를 수정, 조작할 수 있는 프로그래밍 interface
- 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있다.
- 웹 페이지는 일종의 문서(document)로서, 웹 브라우저를 통해 해석되어 브라우저 화면에 나타나거나 HTML 소스 자체로 나타난다.
- DOM은 웹 페이지의 객체 지향 표현으로, html(문서)에 접근하여 마치 객체(object)처럼 html을 조작할 수 있다.
- 문서 객체: html의 태그(element)들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것
- DOM 표준 규약 W3C DOM
DOM의 tree구조
- root node에서 시작해 아래로 자식 노드들이 연결되는 구조
- root node: parent가 없는 최상위 node
- leaf node: children이 없는 node
DOM과 JavaScript
- JavaScript로 DOM을 조작하여 html에 element를 추가, 삭제, 내용 변경을 할 수 있다.
- JavaScript가 문서와 문서의 요소(element)에 접근하는 데 DOM이 사용되는 것
- DOM은 프로그래밍 언어가 아니며, DOM 없이 JavaScript 언어는 문서의 정보를 얻지 못한다.
- 전체 문서, head, body같은 문서의 모든 요소(element)는 문서 객체로서 DOM을 이용해 JavaScript 같은 스크립트 언어(scripting language)를 통해 접근하고 조작한다.
- 페이지 컨텐츠는 DOM에 저장되고, JavaScript를 통해 접근 및 조작할 수 있다.
- API(웹 페이지 or XML 페이지) = DOM + JavaScript(스크립트 언어)
- DOM의 구현은 어떠한 언어에서도 가능하다.