data-*属性使用

1. 存储配置信息：

   <button id="level1" data-level="1" data-type="normal">开始游戏</button>
   

   在这个例子中，data-level和data-type属性用来配置游戏关卡的级别和类型。
2. 增强交互性：

   <a href="#" data-tooltip="这是一个链接">链接</a>
   

   这里，data-tooltip属性用来定义当鼠标悬停在链接上时显示的工具提示文本。
3. 作为事件处理的数据源：

   <li data-id="123">项目1</li>
   <li data-id="456">项目2</li>
   

   当用户点击某个列表项时，可以通过data-id属性获取该项目的唯一标识符。
4. 作为AJAX的辅助：

   <div class="news-item" data-url="news.php?id=1">加载新闻</div>
   

   当需要通过AJAX加载新闻内容时，data-url属性可以指定加载内容的URL。
5. 自定义组件状态：

   <custom-toggle data-active="false"></custom-toggle>
   

   在这个自定义组件中，data-active属性用来表示切换按钮的激活状态。
6. 辅助内容排序和过滤：

   <tr data-priority="high">重要任务</tr>
   <tr data-priority="low">次要任务</tr>
   

   在任务列表中，data-priority属性可以用来对任务进行排序或过滤。
7. 标记和选择元素：

   <img src="image.jpg" data-gallery="nature" alt="自然风光">
   

   通过data-gallery属性，可以标记图片属于哪个图库，然后使用JavaScript选择所有属于特定图库的图片。 在JavaScript中，你可以通过元素的dataset属性来访问这些自定义数据属性。例如：

// 获取按钮的级别和类型
var button = document.getElementById('level1');
var level = button.dataset.level;
var type = button.dataset.type;
console.log(level); // 输出: "1"
console.log(type);  // 输出: "normal"
// 处理点击事件，获取项目的ID
var items = document.querySelectorAll('li');
items.forEach(function(item) {
  item.addEventListener('click', function() {
    var id = this.dataset.id;
    console.log('Clicked item with ID:', id);
  });
});

这些例子展示了data-*属性在实际应用中的灵活性和实用性。