DOM이란? (Document Object Model)
- DOM(Document Object Model)은
HTML및XML문서를 트리 구조인 노드(nodes)로 표현되며 이를 JavaScript 객체(objects)로 제공하여 웹 페이지의 각 요소에 접근하고 수정/조작 할 수 있는 방법을 제공한다.
NOTE
DOM은 문서를node와object로 구성된 트리 형태
DOM은 수정/조작할 수 있는 대상(문서의 구조, 내용, 스타일 등)
DOM의 기본 개념
1. 문서의 구조화된 표현
- DOM은 웹 문서를 트리 구조로 나타내고 이 트리 구조에서 각 요소는 node로 표현된다.
- HTML 문서에서
<html>,<body>,<div>같은 요소들은 각각 node로 취급되며 이 노드들은 계층적으로 연결 되어 있다.
2. 프로그램 문서 간의 인터페이스
- JS같은 언어를 통해 DOM에 접근하면, 웹 페이지의 요소를 실시간으로 변경하거나 새 요소를 추가하거나, 기존 요소를 삭제할 수 있다.
- 선택,변경,이벤트,삭제가 가능해진다.
DOM Manipulation(돔 조작)
DOM을 프로그래밍 언어로 조작하는 것을 DOM 조작(DOM Manipulation) 이라고 표현한다.
JavaScript를 사용하여 HTML 요소를 선택하고, 추가, 삭제, 수정하거나, 스타일을 변경하는 작업을 수행할 수 있다.
3. DOM 트리 구조
다음과 같은 HTML 문서가 있을 때,
<html> <!--최상위 노드 -->
<body> <!--자식 노드 -->
<div>
<p>Hello World</p>
</div>
</body>
</html>
다음과 같은 DOM 트리로 표현할 수 있다.
html
├── body
└── div
└── p
└── Hello World (텍스트 노드)
Improvise, Adapt, Overcome