HTML DOM 섹션 객체 완벽 정리 – 생성 문법과 예제 코드

HTML DOM 섹션 객체란?

HTML DOM 섹션 객체는 HTML 문서 내의 <section> 요소를 나타내며, JavaScript를 통해 이 요소를 생성하고 조작할 수 있게 해주는 인터페이스입니다. <section>은 HTML5에서 도입된 시맨틱(의미론적) 태그로, 문서 안에서 하나의 주제를 담는 독립적인 콘텐츠 구역을 정의할 때 사용합니다.

이 객체를 활용하면 페이지가 로드된 이후에도 버튼 클릭 같은 사용자 이벤트에 반응해 새로운 섹션을 동적으로 만들어 화면에 추가할 수 있습니다.

섹션 객체 생성 문법

새로운 섹션 객체를 만들 때는 document.createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.

document.createElement("SECTION");

이 메서드는 인수로 전달한 태그 이름에 해당하는 새로운 요소 노드를 반환합니다. 단, 반환된 노드를 appendChild() 등으로 문서에 추가해야 실제 화면에 표시됩니다.

예제 코드

다음은 버튼을 클릭하면 <section> 요소를 동적으로 생성해 문서에 추가하는 완전한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .btn{
        background-color:#fff;
        border:1.5px dashed #0197F6;
        height:2rem;
        border-radius:2px;
        width:60%;
        margin:2rem auto;
        display:block;
        color:#0197F6;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>DOM Section Object Demo</h1>
<button onclick="createSection()" class="btn">Create a section object</button>
<script>
    function createSection() {
        var sectionElement = document.createElement("SECTION");
        sectionElement.innerHTML = "Hi! I'm a <strong>&lt;section&gt;</strong> element in HTML";
        document.body.appendChild(sectionElement);
    }
</script>
</body>
</html>

코드 동작 방식

1. document.createElement("SECTION")으로 새로운 섹션 요소를 생성합니다.
2. innerHTML 속성으로 섹션 내부에 표시할 텍스트와 <strong> 태그를 삽입합니다.
3. document.body.appendChild()를 호출해 생성한 섹션을 <body>의 마지막에 추가합니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 섹션 객체 완벽 정리 – 생성 문법과 예제 코드

Create a section object 버튼을 클릭하면, 스크립트에 의해 새로 생성된 <section> 요소가 페이지에 아래와 같이 나타납니다.

HTML DOM 섹션 객체 완벽 정리 – 생성 문법과 예제 코드

정리

HTML DOM 섹션 객체는 <section> 요소를 JavaScript로 제어할 수 있는 핵심 도구입니다. document.createElement("SECTION")으로 요소를 만들고, innerHTML로 내용을 채운 뒤 appendChild()로 문서에 추가하는 세 단계만 기억하면 동적인 웹 페이지 구성이 훨씬 쉬워집니다. 이 패턴은 <article>, <div> 등 다른 요소를 다룰 때도 동일하게 적용할 수 있으니 꼭 익혀두시기 바랍니다.