[웹 개발] DOM(Document Object Model)이란?

DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델로, HTML이나 XML 문서를 프로그래밍적으로 조작할 수 있는 인터페이스를 제공합니다

모든 웹 페이지 요소는 DOM을 통해 접근하고 조작할 수 있으며, JavaScript를 사용하여 동적으로 수정할 수 있습니다

DOM의 구조

DOM은 트리 구조로 이루어져 있으며, 각 요소는 노드(Node)라고 부릅니다

DOM의 주요 노드 유형은 다음과 같습니다

• 요소 노드(Element Node)
  HTML 요소를 나타냅니다
• 속성 노드(Attribute Noe)
  HTML 요소의 속성을 나타냅니다
• 테스트 노드(Text Node)
  HTML 요소의 텍스트를 나타냅니다
• 주석 노드(Comment Node)
  HTML 문서의 주석을 나타냅니다

DOM 조작

요소 선택

JavaScript를 사용하여 원하는 요소를 선택할 수 있습니다

예를 들어, 아이디가 "myElement"인 요소를 선택하는 방법은 다음과 같습니다

var element = document.getElementById("myElement");

요소 조작

선택한 요소의 내용이나 스타일을 등을 변경할 수 있습니다

예를 들어, 텍스트 내용을 변경하는 방법은 다음과 같습니다

element.textContent = "새로운 내용";

요소 추가 및 삭제

DOM을 사용하여 새로운 요소를 추가하거나 기존 요소를 삭제할 수 있습니다

예를 들어, 새로운 div 요소를 추가하는 방법은 다음과 같습니다

var newDiv = document.createElement("div");
document.body.appendChild(newDiv);

장점

• 동적 조작
  DOM을 사용하면 JavaScript를 통해 웹 페이지를 동적으로 조작할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다
• 프로그래밍적 접근
  DOM을 사용하면 프로그래밍적으로 웹 페이지의 구조와 내용에 접근할 수 있어서 다양한 기능을 구현할 수 있습니다