문서 객체 모델(DOM) 소개: 프론트엔드 개발의 기초
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발 초보자, 웹 애플리케이션 개발자
핵심 요약
- DOM은 HTML/XHTML 문서를 트리 구조로 표현하여 브라우저가 동적으로 조작할 수 있도록 한다.
- JavaScript를 통해
getElementById
,querySelector
등의 메서드로 요소를 선택하고 내용/스타일/속성을 변경할 수 있다. - 이벤트 처리(
addEventListener
)를 통해 사용자 상호작용(버튼 클릭, 폼 제출 등)에 반응하는 동적 웹 페이지를 구현할 수 있다.
섹션별 세부 요약
1. DOM의 정의와 중요성
- DOM은 HTML/XHTML 문서의 구조적 표현으로, 브라우저가 생성하는 실시간 트리 구조이다.
- HTML은 소스, DOM은 브라우저가 사용하는 라이브 버전이다.
- DOM 없이 웹 페이지는 정적이며, 동적 콘텐츠 업데이트가 불가능하다.
2. DOM의 구조
- 루트 노드:
document
객체가 최상위 노드이다. - 요소 노드:
,
,
등 HTML 태그가 요소 노드로 표현된다.
- 텍스트 노드:
에서 "Hello"는 텍스트 노드이다.Hello
- 속성 노드:
id
,class
,src
등의 속성이 노드로 연결된다.
3. JavaScript를 통한 DOM 조작
- 요소 선택:
- getElementById("id")
- querySelector("CSS 선택자")
- getElementsByClassName("class")
- 내용/스타일 변경:
- .innerText = "새로운 텍스트"
- .style.color = "blue"
- .innerHTML = "강조"
- 요소 생성 및 추가/삭제:
- createElement("p")
- appendChild(newElement)
- remove()
4. 이벤트 처리
- 이벤트 종류:
click
,mouseover
,keydown
,submit
,load
등. - 이벤트 리스너 등록:
```javascript
element.addEventListener("click", function() { / 동작 / });
```
- 폼 제출 예제:
```javascript
form.addEventListener("submit", function(e) {
e.preventDefault();
display.innerText = Hello, ${nameInput.value}!
;
});
```
5. 일반적인 실수 및 해결 방법
- DOM 요소가 로드되기 전에 조작 시 오류 발생:
```javascript
document.addEventListener("DOMContentLoaded", function() {
// DOM 조작 코드
});
```
- HTML과 JavaScript 분리:
- Separation of Concerns 원칙 준수.
- 여러 이벤트 리스너를 동일 요소에 추가 가능.
6. 프레임워크와의 연관성
- React, Angular, Vue는 가상 DOM을 사용하여 UI 업데이트를 최적화한다.
- DOM 이해는 프레임워크 사용 시 기초 지식이 필요하다.
결론
- DOM은 웹 페이지를 동적으로 조작하는 핵심 기술로, JavaScript와 이벤트 처리를 통해 실현한다.
DOMContentLoaded
이벤트 사용으로 DOM 로드 완료 후 조작을 보장해야 하며, 분리된 코드 구조와 가상 DOM 활용이 권장된다.