HTML DOM Details 객체는 HTML <details> 요소와 연결된 객체로, 사용자가 원할 때만 펼쳐서 볼 수 있는 정보를 만들 때 활용됩니다. 즉, 화면에는 요약 정보만 보여주고 상세 내용은 클릭 시에만 노출하는 인터랙티브 UI를 자바스크립트로 제어할 수 있습니다.
Details 객체의 속성
Details 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | open <details> 요소의 내용이 현재 사용자에게 표시(펼침) 상태인지 여부를 설정하거나 반환합니다. true이면 펼쳐진 상태, false이면 접힌 상태입니다. |
구문(Syntax)
Details 객체를 새로 생성하는 기본 구문은 다음과 같습니다.
var p = document.createElement("DETAILS");
document 객체의 createElement() 메서드에 "DETAILS"를 전달하면 새로운 <details> 요소가 메모리에 생성되며, 이후 DOM에 추가해야 실제 화면에 나타납니다.
예제
버튼을 클릭하면 명소에 대한 <details> 요소를 동적으로 생성하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Details 객체 예제</h2>
<p>아래 버튼을 클릭하면 명소에 대한 DETAILS 요소가 생성됩니다.</p>
<button onclick="detCreate()">생성</button>
<br><br>
<script>
function detCreate() {
var et = document.createElement("DETAILS");
var sum = document.createElement("SUMMARY");
var sumText = document.createTextNode("에펠탑");
var txt = document.createTextNode("세계에서 가장 유명한 명소 중 하나입니다.");
sum.appendChild(sumText);
et.appendChild(txt);
document.body.appendChild(sum);
document.body.appendChild(et);
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 '생성' 버튼이 있는 페이지가 나타납니다. 버튼을 클릭한 뒤, 생성된 항목 옆의 화살표를 눌러 details를 펼치면 숨겨져 있던 설명 텍스트가 표시됩니다.
예제 코드 분석
위 예제가 동작하는 과정을 단계별로 살펴보겠습니다.
1. 버튼에 클릭 이벤트 연결
사용자가 버튼을 클릭하면 detCreate() 함수가 실행되도록 onclick 속성으로 연결합니다.
<button onclick="detCreate()">생성</button>
2. 요소 생성
detCreate() 함수는 document 객체의 createElement() 메서드를 사용해 <details> 요소를 만들어 변수 et에 할당하고, <details> 안에 포함되는 제목 역할의 <summary> 요소도 생성하여 변수 sum에 할당합니다.
3. 텍스트 노드 생성 및 추가
createTextNode()로 요약 텍스트(sumText)와 본문 설명 텍스트(txt) 두 개의 텍스트 노드를 만든 뒤, appendChild() 메서드를 통해 각각 <summary>와 <details> 요소에 붙입니다.
function detCreate() {
var et = document.createElement("DETAILS");
var sum = document.createElement("SUMMARY");
var sumText = document.createTextNode("에펠탑");
var txt = document.createTextNode("세계에서 가장 유명한 명소 중 하나입니다.");
sum.appendChild(sumText);
et.appendChild(txt);
document.body.appendChild(sum);
document.body.appendChild(et);
}
4. 문서에 요소 추가
마지막으로 appendChild() 메서드에 생성한 요소들을 매개변수로 전달하여 <summary>와 <details> 요소를 문서 본문(body)에 추가합니다. 이렇게 하면 화면에 새로운 접기/펼치기 콘텐츠가 동적으로 나타나게 됩니다.
이처럼 Details 객체와 open 속성을 활용하면 FAQ, 공지사항, 추가 정보 영역 등 사용자 경험을 높이는 아코디언형 UI를 간단하게 구현할 수 있습니다.