리액트
웹 - DOM
개발자 포비
2024. 12. 3. 22:24
1. DOM의 정의
- DOM (Document Object Model): HTML 또는 XML 문서의 구조와 내용을 프로그래밍적으로 조작할 수 있게 해주는 인터페이스.
- HTML 요소를 노드로 변환하여 JavaScript를 통해 접근하고 조작 가능.
2. 주요 개념
- 노드 (Node): DOM의 기본 단위로, 요소 노드, 텍스트 노드, 속성 노드 등이 있음.
- 트리 구조: DOM은 계층적인 트리 구조로 구성되며, 최상위 노드는
document
객체. - API: JavaScript에서 DOM을 조작할 수 있는 다양한 메서드와 속성을 제공.
3. DOM의 변환 과정
- 브라우저가 HTML 문서를 로드할 때 HTML을 파싱하고 DOM 트리를 생성함.
- 이 과정에서 웹 페이지가 화면에 렌더링됨.
4. 프론트엔드 조작
- DOM은 스크립트 언어(주로 JavaScript)를 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있게 해줌.