Đối tượng Summary trong HTML DOM

Đối tượng Summary trong HTML DOM đại diện cho phần tử <summary> — tiêu đề hiển thị cho phần tử <details> (khung thu gọn/mở rộng). Click vào summary sẽ toggle hiển thị nội dung bên trong details.

Tạo đối tượng Summary

document.createElement("SUMMARY");

Ví dụ minh họa

Tạo động một cặp <details> + <summary> kèm đoạn văn bản bên trong:

<!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>Demo đối tượng Summary trong DOM</h1>
<button onclick="taoSummary()" class="btn">Tạo đối tượng summary</button>
<script>
  function taoSummary() {
    var details = document.createElement("DETAILS");
    var summary = document.createElement("SUMMARY");
    var para = document.createElement("P");
    var paraTxt = document.createTextNode("- Tôi là phần tử para");
    para.appendChild(paraTxt);
    var summaryTxt = document.createTextNode("Tôi là phần tử summary");
    summary.appendChild(summaryTxt);
    details.appendChild(summary);
    details.appendChild(para);
    document.body.appendChild(details);
  }
</script>
</body>
</html>

Kết quả

• Ban đầu: chỉ có nút bấm.
• Sau khi nhấn nút: xuất hiện khung <details> với tiêu đề "Tôi là phần tử summary".
• Click vào tiêu đề: nội dung "Tôi là phần tử para" hiện/ẩn.

Ứng dụng: Thường dùng cho FAQ, menu accordion, nội dung có thể thu gọn mà không cần JavaScript phức tạp (HTML5 native).