728x90
728x90
DOM(Document Object Model)
: HTML, XML 문서의 구조를 표현하는 프로그래밍 인터페이스
웹 페이지의 콘텐츠를 동적으로 접근하고 수정할 수 있도록 돕는 계층적 모델입니다. DOM은 브라우저가 웹 페이지를 렌더링하기 위해 내부적으로 사용하는 데이터 구조로, JavaScript와 같은 프로그래밍 언어로 제어할 수 있습니다.
DOM의 주요 개념
- 트리 구조
- DOM은 문서를 계층적 트리 구조로 표현합니다.
- HTML 문서의 각 요소는 노드(Node)로 표현되며, 이 노드들은 부모-자식 관계를 가집니다.
<html>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
css
- html
- body
- h1
- p
2. 노드(Node)
- DOM에서 모든 요소와 텍스트는 노드로 표현됩니다.
- 주요 노드 유형:
- 요소 노드(Element Node): HTML 태그 (e.g., <div>, <p> 등).
- 텍스트 노드(Text Node): 요소 안의 텍스트 내용.
- 속성 노드(Attribute Node): 요소의 속성 (e.g., id, class 등).
3. 객체 기반 모델
- DOM은 문서를 객체(Object)로 나타냅니다. 각 노드는 객체로 취급되며 프로퍼티와 메서드를 사용하여 조작할 수 있습니다.
DOM의 작동 원리
- HTML 파싱: 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성.
- CSSOM 생성: CSS 파일을 파싱하여 CSSOM(CSS Object Model) 생성.
- 렌더링 트리: DOM과 CSSOM을 결합하여 최종 렌더링 트리를 생성.
- JavaScript 실행: DOM을 JavaScript로 조작 가능.
DOM의 구성 요소
- Document
- DOM 트리의 최상위 객체로, 문서 전체를 나타냅니다.
- 주요 프로퍼티 및 메서드:
- document.getElementById(): 특정 id를 가진 요소를 가져옴.
- document.querySelector(): CSS 선택자를 사용해 요소를 선택.
- document.createElement(): 새로운 요소 생성.
- Element
- HTML 태그를 나타내는 노드.
- 주요 프로퍼티:
- innerHTML: 요소의 HTML 내용을 가져오거나 수정.
- className: 클래스 이름을 가져오거나 수정.
- style: 요소의 인라인 스타일 접근.
- Event
- DOM은 이벤트 모델을 통해 사용자와 상호작용을 처리.
- 이벤트 리스너를 추가:
-
javascript코드 복사
DOM의 단점
- 성능 문제:
- DOM 트리가 크거나, 조작이 빈번한 경우 렌더링 성능 저하 가능.
- 해결 방법: 가상 DOM(Virtual DOM) 사용 (React 같은 라이브러리).
- 호환성 문제:
- 일부 브라우저에서 DOM 메서드 지원 범위 차이 발생 가능.
DOM은 웹 개발의 핵심 요소로, 웹 페이지를 동적이고 사용자 친화적으로 만드는 데 필수적입니다. 효율적으로 활용하기 위해 DOM API와 이벤트 모델을 깊이 이해하는 것이 중요합니다! 😊
728x90
728x90
'취준 > CS 기술면접 준비' 카테고리의 다른 글
| SPA(Single Page Application) (2) | 2025.01.05 |
|---|---|
| CSR (Client-Side Rendering) vs SSR (Server-Side Rendering) (5) | 2025.01.05 |
| 웹 표준(Web Standards)이란? (1) | 2025.01.05 |
| SEO(Search Engine Optimization, 검색 엔진 최적화)란? (2) | 2025.01.05 |
| HTTP와 HTTPS의 차이 (1) | 2025.01.05 |
댓글