JavaScript中无ID和Class获取HTML Data属性值教程

本文详细介绍了如何在不依赖id和class选择器的情况下，利用javascript高效获取html元素的自定义数据属性（`data-*`）值。通过讲解`htmlelement.dataset` api和css属性选择器（如`[attribute]`和`[attribute="value"]`），并结合`queryselector`与`queryselectorall`，提供了从单个或多个元素中提取`data-target-id`等属性值的实用方法和代码示例，旨在提升前端开发中数据处理的灵活性。

引言：理解HTML data-* 属性

HTML5引入了自定义数据属性（data-*），允许开发者在标准HTML元素上存储额外的信息，而无需使用非标准的属性或DOM操作技巧。这些属性以data-为前缀，后跟自定义的名称，例如

。它们提供了一种在不影响页面语义或视觉效果的前提下，将自定义数据附加到HTML元素上的简洁方式，常用于存储小块的私有数据，供JavaScript脚本访问。

在某些场景下，我们可能需要获取这些data-*属性的值，但目标元素可能没有唯一的id或特定的class。此时，我们需要借助其他DOM选择器和API来精准定位并提取所需数据。

核心API：HTMLElement.dataset

在JavaScript中，访问data-*属性最推荐和最现代的方式是使用HTMLElement.dataset属性。dataset返回一个DOMStringMap对象，其中包含了元素所有data-*属性的键值对。

工作原理： 当一个data-*属性被定义时，例如data-target-id，在dataset对象中它会被转换为驼峰命名法（camelCase）的键，即targetId。

示例： 如果HTML元素是

，那么你可以通过element.dataset.targetId来访问其值。

无需ID或Class的元素选择

为了获取没有id或class的元素的data-*属性，我们可以利用CSS属性选择器来定位元素。

立即学习“Java免费学习笔记（深入）”；

1. 属性选择器 [attribute]

这种选择器用于选取包含指定属性的元素，无论属性值是什么。

语法： [attribute]

应用场景： 当你只想选择所有具有data-target-id属性的元素时。

2. 属性值选择器 [attribute="value"]

这种选择器用于选取指定属性具有特定值的元素。

标签： css javascript java html 前端 node html5 浏览器 前端开发 键值对 html元素 c