HTML | DOM Summary Object

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>             

chevron_right


Output:
Before Clicking On Button:

After Clicking On Button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>             

chevron_right


Output:

Before Clicking On Button:

After Clicking On Button:

Suppoted Browser: The browser supported by DOM Summary Object are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubham_singh



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.