HTML DOM Summary用法及代码示例

DOM摘要对象用于表示HTML <summary>元素。 “摘要”元素由getElementById()访问。

用法:

document.getElementById("ID");

其中“id”是分配给“summary”标签的ID。

示例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>

输出：
在单击按钮之前：

单击按钮后：

示例-2：可以使用document.createElement方法创建摘要对象。

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

输出：

在单击按钮之前：

单击按钮后：

支持的浏览器：下面列出了DOM摘要对象支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Summary Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。