HTML DOM summary 객체 완벽 정리 – 생성 방법부터 실전 예제까지

HTML DOM의 summary 객체는 HTML 문서 안의 <summary> 요소를 자바스크립트로 조작할 수 있게 해주는 인터페이스입니다. <summary> 요소는 보통 <details> 요소의 첫 번째 자식으로 배치되며, 클릭하면 내용이 펼쳐지거나 접히는 아코디언 형태 UI에서 '제목' 역할을 담당합니다.

summary 객체 생성 문법

document.createElement() 메서드에 태그 이름을 전달하면 새로운 summary 객체를 간단히 만들 수 있습니다.

document.createElement("SUMMARY");

예제 코드

아래 예제에서는 버튼을 클릭할 때마다 <details>, <summary>, <p> 요소를 동적으로 생성하여 문서에 추가하는 방법을 보여줍니다.

<!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 summary 객체 데모</h1>
<button onclick="createSummary()" class="btn">summary 객체 생성하기</button>
<script>
    function createSummary() {
        var details = document.createElement("DETAILS");
        var summary = document.createElement("SUMMARY");
        var para = document.createElement("P");
        var paraTxt = document.createTextNode("- 저는 p 요소입니다");
        para.appendChild(paraTxt);
        var summaryTxt = document.createTextNode("저는 summary 요소입니다");
        summary.appendChild(summaryTxt);
        details.appendChild(summary);
        details.appendChild(para);
        document.body.appendChild(details);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM summary 객체 완벽 정리 – 생성 방법부터 실전 예제까지

"summary 객체 생성하기" 버튼을 클릭하면 <details> 요소 안에 <summary>와 <p> 요소가 담긴 새로운 블록이 화면에 추가됩니다.

HTML DOM summary 객체 완벽 정리 – 생성 방법부터 실전 예제까지

생성된 summary 영역을 클릭하면 숨겨져 있던 단락 내용이 아래처럼 펼쳐집니다.

HTML DOM summary 객체 완벽 정리 – 생성 방법부터 실전 예제까지

참고 사항

<summary> 요소는 반드시 <details> 요소의 첫 번째 자식으로 위치해야 합니다.
자바스크립트에서 details.open 속성을 true/false로 설정하면 펼침 상태를 프로그래밍 방식으로도 제어할 수 있습니다.
summary 객체는 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 지원됩니다.