리액트

웹 - 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)를 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있게 해줌.