[Web] 웹 개발 필수 지식, DOM이란 무엇일까?

 

 

 

 

 

 

 

DOM(Document Object Model) 이란?

---

 

 

 

 

 

 

 

 

DOM(Document Object Model)이란 무엇인가 

 

DOM이란 바로 HTML 문서를 트리 형태의 구조로 표현하는 객체 모델입니다. 

 

웹 브라우저는 HTML 문서를 읽어들여 DOM 트리를 생성하고 이를 통해 웹 페이지의 각 요소에 접근하고 조작할 수 있게 됩니다. 

 

다시 말해서 웹 페이지를 구성하는 각 요소를 객체로 표현하고 이들 관의 관계를 계층적으로 나타낸 것입니다. 각 객체는 요소의 속성, 내용, 자식 요소 등에 대한 정보를 담고있습니다. 

DOM의 주요 기능

 

DOM은 웹 개발자가 웹 페이지를 동적으로 제어할 수 있도록 다양한 기능을 제공합니다. 

 

1. 요소 선택 : 특정 요소를 선택하여 조작할 수 있음

 

2. 요소 내용 변경 : 요소의 텍스트 내용, HTML 속성 값 등을 변경할 수 있음

 

3. 요소 스타일 변경 : CSS 속성을 조작해서 요소의 스타일을 변경할 수 있음 

 

4. 요소 생성 및 추가 : 새로운 요소를 생성하고 DOM 트리에 추가할 수 있음 

 

5. 요소 삭제 : DOM 트리에서 특정 요소 삭제 가능 

 

6. 이벤트 처리 : 사용자의 클릭, 마우스 이동, 키 입력과 같은 이벤트에 반응하여 특정 동작 수행 가능 

 

 

 

 

 

DOM 활용 예시 

1. 이미지 슬라이드 쇼 

 

자바 스크립트를 사용해서 일정 시간 간격으로 이미지 요소를 변경하고 버튼 클릭 이벤트를 처리해서 사용자가 슬라이드를 제어할 수 있도록 합니다. 

 

 

2. 드롭 다운 메뉴 

 

마우스 호버 이벤트를 감지해서 하위 메뉴를 표시하고, 마우스가 벗어나면 하위 메뉴가 숨겨지도록 합니다. 

 

 

3. 폼 유효성 검사 

 

사용자가 입력한 값을 실시간으로 검사하고, 유효하지 않은 값이 입력될 경우 경고 메시지를 표시하거나 제출 버튼을 비활성화 합니다. 

 

 

4. 무한 스크롤

 

사용자가 스크롤을 내릴 때마다 새로운 콘텐츠를 동적으로 로드해서 페이지를 계속해서 확장시킵니다. 

 

 

5. 모달 창 

 

특정 버튼 클릭 시 화면에 모달 창을 띄우고, 닫기 버튼 클릭 시 모달 창을 숨깁니다.