HTML DOM div 객체 완벽 가이드 – 속성, 문법 및 실전 예제

HTML DOM의 div 객체는 HTML <div> 요소와 연결되어 있습니다. <div>는 범용 블록 레벨(block-level) 요소로, 여러 요소를 하나의 그룹으로 묶어 스타일을 일괄 적용하거나, 단일 태그 이름 또는 id를 기준으로 HTML 요소 그룹을 조작할 수 있게 해줍니다.

div 객체의 속성(Properties)

div 객체에서 제공하는 주요 속성은 다음과 같습니다.

속성	설명
align	<div> 요소의 align 속성값을 설정하거나 반환합니다. 다만 이 속성은 HTML5에서 더 이상 지원되지 않으므로, 정렬 작업에는 CSS를 사용하는 것이 좋습니다.

문법(Syntax)

div 객체를 생성하는 기본 문법은 다음과 같습니다.

var p = document.createElement("DIV");

위 코드처럼 document.createElement() 메서드에 "DIV"를 인자로 전달하면 새로운 <div> 요소가 동적으로 생성됩니다.

예제(Example)

HTML DOM div 객체의 실제 동작을 확인해 보겠습니다. 아래 예제는 버튼을 클릭하면 텍스트가 포함된 새로운 <div> 요소를 화면에 추가하는 코드입니다.

<!DOCTYPE html>
<html>
<body>
<h2>Div 객체 예제</h2>
<p>CREATE 버튼을 클릭하면 텍스트가 포함된 div 요소가 생성됩니다.</p>
<button onclick="createDiv()">CREATE</button>
<script>
    function createDiv() {
        var d = document.createElement("DIV");
        var txt = document.createTextNode("Sample Div element");
        d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
        d.appendChild(txt);
        document.body.appendChild(d);
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

HTML DOM div 객체 완벽 가이드 – 속성, 문법 및 실전 예제

CREATE 버튼을 클릭하면 아래와 같이 새로운 <div> 요소가 페이지에 추가됩니다.

HTML DOM div 객체 완벽 가이드 – 속성, 문법 및 실전 예제

코드 상세 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭하면 createDiv() 함수를 실행하는 CREATE 버튼을 생성합니다.

<button onclick="createDiv()">CREATE</button>

createDiv() 함수 내부에서는 다음 작업이 순서대로 수행됩니다.

1. document.createElement("DIV")로 새로운 <div> 요소를 만들어 변수 d에 할당합니다.
2. document.createTextNode()로 텍스트 노드를 생성하여 변수 txt에 저장합니다.
3. setAttribute() 메서드를 사용해 <div> 요소에 여백, 너비, 배경색, 테두리 등의 스타일 속성을 지정합니다.
4. appendChild() 메서드로 텍스트 노드를 <div> 요소에 추가합니다.
5. 마지막으로 <div> 요소 전체를 document.body의 자식 노드로 추가하여 화면에 표시합니다.

function createDiv() {
    var d = document.createElement("DIV");
    var txt = document.createTextNode("Sample Div element");
    d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
    d.appendChild(txt);
    document.body.appendChild(d);
}

이처럼 div 객체를 활용하면 JavaScript만으로도 동적으로 콘텐츠 영역을 만들고 스타일을 적용할 수 있어, 웹 페이지의 인터랙티브한 UI 구성에 매우 유용합니다.