无ID属性时如何通过data-*属性获取HTML文本元素？

当元素没有ID属性时，可以利用以下几种实用方法，基于data-*属性定位并操作元素：

1. 使用document.querySelector() / document.querySelectorAll() #

这是最常用的方式，支持标准CSS属性选择器语法：

• 获取第一个匹配的元素：

// 定位data-vehicle值为"Car"的ul元素
const carList = document.querySelector('[data-vehicle="Car"]');
// 定位data-model值为"Sedan"的li元素
const sedanItem = document.querySelector('[data-model="Sedan"]');

• 获取所有匹配的元素（返回NodeList集合）：

// 获取页面中所有data-vehicle值为"Car"的元素
const allCarElements = document.querySelectorAll('[data-vehicle="Car"]');

2. 用dataset属性快速访问data值 #

如果已经定位到目标元素，可通过dataset属性直接读取data-*属性的值（不需要写完整的data-前缀）：

const sedanItem = document.querySelector('[data-model="Sedan"]');
// 获取data-model的值
console.log(sedanItem.dataset.model); // 输出 "Sedan"
// 获取元素内的文本内容
console.log(sedanItem.textContent.trim()); // 输出 "2.5HP"

3. 进阶属性选择器 #

针对更复杂的匹配需求，可使用CSS属性选择器的进阶规则：

• 匹配包含指定子串的data属性：[data-vehicle*="ar"]（匹配data-vehicle值包含"ar"的元素）
• 匹配以指定前缀开头的data属性：[data-vehicle^="Ca"]（匹配data-vehicle值以"Ca"开头的元素）
• 匹配以指定后缀结尾的data属性：[data-vehicle$="r"]（匹配data-vehicle值以"r"结尾的元素）

内容的提问来源于stack exchange，提问作者Sengkek