Open In App

HTML | DOM Summary Object

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Summary Object is used to represent the HTML <summary> element . The Summary element is accessed by getElementById().

Syntax:

document.getElementById("ID"); 

Where “id” is the ID assigned to the “summary” tag.

Example-1:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Summary Object</title>
    <style>
        h2 {
            color: green;
            font-size: 35px;
        }
          
        summary {
            font-size: 40px;
            color: #090;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h2>DOM Summary Object </h2>
  
        <details>
          <!-- 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>
        </details>
  
        <br>
        <button onclick="myGeeks()">Submit</button>
        <p id="sudo"></p>
        <script>
            function myGeeks() {
                // Accessing summary tag 
                var x = document.getElementById("GFG").innerHTML;
                // display text content present in summary tag
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
    </center>
</body>
</html>             


Output:
Before Clicking On Button:

After Clicking On Button:

Example-2: Summary Object can be created by using the document.createElement method.




<!DOCTYPE html> 
<html
  
<head
    <title>DOM Summary Object</title
    <style
       h1  {
         color:green;
         font-size:35px;
         }
        h2 { 
            color: green; 
            font-size: 35px; 
        
          
        summary { 
            font-size: 40px; 
            color: #090; 
            font-weight: bold; 
        
    </style
</head
  
<body
    <center
       <h1>GeeksForGeeks</h1>
        <h2>DOM Summary Object </h2>
        <br
        <button onclick="myGeeks()">Submit</button
        <script
            function myGeeks() { 
              
        //  Creating details object.    
        var g = document.createElement("DETAILS");
        document.body.appendChild(g);
  
  //  Creating summary object.
  var summary = document.createElement("SUMMARY");
  var text1 = document.createTextNode("GeeksForGeeks");
  summary.appendChild(text1);
  
   var para = document.createElement("P");
   var text2 = document.createTextNode(
   "A computer science portal for geeks");
  para.appendChild(text2);
  
  g.appendChild(summary);
  g.appendChild(para);         
            
        </script
    </center
</body
  
</html>             


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
Previous
Next
Share your thoughts in the comments
Similar Reads