HTML DOM (Document Object Model)은 HTML 문서의 구조화된 표현을 제공하며, 이를 통해 JavaScript를 사용하여 HTML 요소를 조작할 수 있습니다. HTML DOM은 프로그래밍 언어가 HTML 문서의 구조, 스타일 및 내용을 변경할 수 있도록 표현하는 방식을 제공합니다.

HTML DOM 의 구성

HTML DOM은 객체의 계층 구조로 이루어져 있습니다. 가장 상위의 객체는 document로, HTML 페이지 전체를 나타냅니다. document 객체는 HTML 요소를 선택하고 변경하는 데 사용됩니다. 하위 객체로는 HTML 요소를 나타내는 Element 객체, HTML 요소의 속성을 나타내는 Attr 객체, 텍스트를 나타내는 Text 객체 등이 있습니다.

HTML DOM 을 사용한 JavaScript 예제

아래는 HTML DOM을 사용하여 문서 내 특정 요소를 변경하는 JavaScript의 간단한 예제입니다.

// HTML 요소 선택 및 변경
var heading = document.getElementById("main-heading");  // id가 "main-heading"인 요소 선택
heading.style.color = "red";  // 선택한 요소의 텍스트 색상 변경

// 새로운 HTML 요소 생성 및 추가
var newParagraph = document.createElement("p");  // 새 <p> 요소 생성
var text = document.createTextNode("This is a new paragraph");  // 새 텍스트 노드 생성
newParagraph.appendChild(text);  // 텍스트를 <p> 요소에 추가

document.body.appendChild(newParagraph);  // <p> 요소를 문서에 추가

위 예제에서는 document.getElementById를 사용하여 id가 “main-heading”인 요소를 선택하고, 선택한 요소의 텍스트 색상을 빨간색으로 변경하였습니다. 또한, document.createElement와 document.createTextNode를 사용하여 새 <p> 요소와 텍스트 노드를 생성하고, appendChild를 사용하여 새로운 <p> 요소를 문서에 추가하였습니다.

HTML DOM을 사용하면 JavaScript를 통해 동적으로 HTML 문서를 조작할 수 있으며, 이를 통해 웹 페이지의 동적 기능을 구현할 수 있습니다.

더 많은 정보는 MDN Web Docs에서 확인하실 수 있습니다.