Open In App
Related Articles

HTML | DOM Summary Object

Like Article
Save Article
Report issue
The DOM Summary Object is used to represent the HTML <summary> element . The Summary element is accessed by getElementById(). Syntax:
Where “id” is the ID assigned to the “summary” tag. Example-1:
<!DOCTYPE html>
    <title>DOM Summary Object</title>
        h2 {
            color: green;
            font-size: 35px;
        summary {
            font-size: 40px;
            color: #090;
            font-weight: bold;
        <h2>DOM Summary Object </h2>
          <!-- assigning id to summary tag. -->
          <summary id="GFG">GeeksforGeeks</summary>
          <p>A computer science portal for geeks</p>
          <div>It is a computer science portal 
            where you can learn programming.</div>
        <button onclick="myGeeks()">Submit</button>
        <p id="sudo"></p>
            function myGeeks() {
                // Accessing summary tag 
                var x = document.getElementById("GFG").innerHTML;
                // display text content present in summary tag
                document.getElementById("sudo").innerHTML = x;

Output: Before Clicking On Button: After Clicking On Button: Example-2: Summary Object can be created by using the document.createElement method.
<!DOCTYPE html> 
    <title>DOM Summary Object</title
       h1  {
        h2 { 
            color: green; 
            font-size: 35px; 
        summary { 
            font-size: 40px; 
            color: #090; 
            font-weight: bold; 
        <h2>DOM Summary Object </h2>
        <button onclick="myGeeks()">Submit</button
            function myGeeks() { 
        //  Creating details object.    
        var g = document.createElement("DETAILS");
  //  Creating summary object.
  var summary = document.createElement("SUMMARY");
  var text1 = document.createTextNode("GeeksForGeeks");
   var para = document.createElement("P");
   var text2 = document.createTextNode(
   "A computer science portal for geeks");

Output: Before Clicking On Button: After Clicking On Button: Supported Browser: The browser supported by DOM Summary Object are listed below:
  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Last Updated : 04 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Similar Reads