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:
<!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
Please Login to comment...