如何将数据存储到 DOM 中？

在本文中，我们将学习如何将数据存储到 DOM。您可以使用data-* 属性在 DOM 上存储数据或信息。 data-*属性可用于定义我们自己的自定义数据属性。它用于存储页面或应用程序私有的自定义数据。

数据属性主要有两部分：

• 属性名：属性名长度至少为1个字符，不包含大写字母，并以‘data-‘为前缀。
• 属性值：可以是任何字符串。

句法：

笔记：

1. 任何存储在 DOM 中的数据都可以在源代码（开发者工具）中查看。
2. 您不能将大写与 data-* 属性一起使用

示例 1：

HTML

 

  
    Data Structure And Algorithm
    Click Here for Discount
    
  
  
 
  
    Operating System
    Click Here for Discount
    
  
  
 
  
    Competitive Programming
    Click Here for Discount
    
  
 
  
    function showDetails(book) {
      var discount =
        book.getAttribute("data-discount");
        alert(discount);
    }
  

 

输出：

示例 2：

您还可以使用 jQuery 中的data() 方法将数据存储在 DOM 上，这是jQuery 中的一个内置方法，用于附加数据或获取所选元素的数据。

句法：

$(selector).data(para1);

HTML

 

  
  
 
  
    div {
      display: block;
      width: 500px;
      font-size: 37px;
      padding: 50px;
      background-color: lightgrey;
    }
 
    span {
       color: green;
    }
  

 

  
    Course Includes
     and !
  
 
  
    // <!-- jQuery code to perform data method -->
    $("div").data("test", {
        first: "Operative System",
        last: "Competitive Programming"
    });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);
  

 

输出：