반응형
DOM 객체란 무엇인가?
웹 개발에서 빠질 수 없는 중요한 개념 중 하나가 바로 DOM(Document Object Model) 객체입니다. 이는 웹 페이지의 구조와 내용을 프로그래밍적으로 제어할 수 있도록 만들어진 모델로, HTML이나 XML 문서를 트리 구조로 표현합니다.
DOM 객체의 정의
DOM은 웹 페이지의 모든 요소를 객체로 표현하는 모델입니다. 이 객체들은 계층적인 트리 구조를 이루며, 각 요소는 노드(Node)로 구성됩니다. DOM 트리의 최상위에는 Document 객체가 있으며, 그 하위에 HTML 요소들이 계층적으로 배치됩니다.
예를 들어, 간단한 HTML 코드가 있다고 가정해 봅시다:
<html>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>이 코드의 DOM 트리는 다음과 같은 구조로 표현됩니다:
- Document
- html (루트 요소)
- body
- h1
- "Hello, World!" (텍스트 노드)
- p
- "This is a paragraph." (텍스트 노드)
- h1
- body
- html (루트 요소)
DOM 객체의 역할
- 구조화된 문서 표현: 웹 페이지의 구조를 논리적으로 표현하여, 각 요소에 쉽게 접근할 수 있습니다.
- 동적 콘텐츠 제어: JavaScript를 통해 DOM 요소를 추가, 수정, 삭제할 수 있어 동적인 웹 페이지를 만들 수 있습니다.
- 이벤트 처리: 클릭, 스크롤, 입력 등 사용자 상호작용을 처리할 수 있습니다. 이를 통해 인터랙티브한 사용자 경험을 제공합니다.
- 스타일 및 속성 관리: DOM을 통해 요소의 스타일(CSS)이나 속성(Attribute)을 동적으로 변경할 수 있습니다.
DOM 조작 방법
- JavaScript를 통한 접근:위 코드는 id가 myElement인 요소의 텍스트를 "안녕하세요!"로 변경합니다.
- document.getElementById("myElement").innerText = "안녕하세요!";
- DOM 요소 생성 및 삽입:이 코드는 새로운 div 요소를 생성하고, 본문에 추가합니다.
- const newElement = document.createElement("div"); newElement.textContent = "새로운 요소입니다."; document.body.appendChild(newElement);
- 이벤트 리스너 추가:버튼 클릭 시 알림 창이 뜨도록 설정하는 코드입니다.
- document.getElementById("myButton").addEventListener("click", function() { alert("버튼이 클릭되었습니다!"); });
DOM 탐색 및 수정
DOM은 계층 구조이기 때문에 부모, 자식, 형제 요소 간의 탐색이 가능합니다.
- 부모 요소 접근: element.parentNode
- 자식 요소 접근: element.children
- 형제 요소 접근: element.nextSibling, element.previousSibling
const parent = document.getElementById("child").parentNode;
console.log(parent.id); // 부모 요소의 ID 출력성능 최적화
DOM 조작은 페이지 성능에 영향을 줄 수 있습니다. 효율적인 DOM 조작을 위해 다음과 같은 방법을 활용할 수 있습니다:
- Document Fragment 사용: 여러 요소를 한 번에 추가할 때 성능 개선
- Batch DOM Updates: DOM 변경 사항을 한 번에 처리하여 리렌더링 최소화
- CSS 클래스 토글 활용: 스타일 변경 시 직접 속성 변경보다 클래스 추가/제거 사용
반응형
'개발 관련 > Server' 카테고리의 다른 글
| 서블릿 필터와 리스너의 차이점 (0) | 2025.02.10 |
|---|---|
| enctype이란 무엇인가? (0) | 2025.02.10 |
| Context Root란 무엇인가? (0) | 2025.02.10 |
| URL과 URI의 차이점 (0) | 2025.02.09 |
| RESTful API란 무엇인가? (0) | 2025.02.08 |