本文介绍在 ID 和类名无法唯一标识元素时，如何通过 HTML 自定义属性（如 data-*）配合 CSS 属性选择器，高效、语义化地选取特定 DOM 节点。

本文介绍在 id 和类名无法唯一标识元素时，如何通过 html 自定义属性（如 `data-*`）配合 css 属性选择器，高效、语义化地选取特定 dom 节点。

在实际前端开发中，常遇到多个元素共享同一类名（如 class="main"）、又无唯一 ID 的场景。此时若想精确获取“Table”单元格的文本内容，仅靠 document.getElementsByClassName('main') 或 document.querySelectorAll('.main') 会返回 NodeList，还需遍历判断——既冗余又低效。更优雅的方式是直接利用元素上已有的语义化属性进行精准匹配。

HTML 中的 data-* 属性专为存储自定义数据而设计，完全符合规范且具备良好可读性。结合 CSS 属性选择器，JavaScript 可通过 document.querySelector() 或 document.querySelectorAll() 直接定位目标元素：

// ✅ 精准选取 data 属性值为 "table" 的 <td> 元素
const tableCell = document.querySelector('[data="table"]');
console.log(tableCell.textContent); // 输出: "Table"

// ✅ 同样适用于其他值
console.log(document.querySelector('[data="chair"]').textContent); // "Chair"
console.log(document.querySelector('[data="desk"]').textContent);  // "Desk"

? 注意：

• 属性选择器语法为 [attr="value"]，需用方括号包裹，属性名与值之间用等号连接，值必须加引号（单/双均可）；
• querySelector() 返回第一个匹配项（推荐用于唯一目标），querySelectorAll('[data]') 则返回所有含 data 属性的元素；
• 若 data 属性值含空格、特殊字符或大小写敏感，请确保字符串完全一致；建议优先使用 data-* 标准命名（如 data-item="table"），增强可维护性与语义性。

此外，该方法不仅限于 data 属性，还可用于 name、type、title 等任意原生或自定义属性。例如：

document.querySelector('input[name="username"]');  
document.querySelector('button[type="submit"]');  

综上，善用属性选择器是脱离“类名污染”与“ID 冗余”的关键实践，它让 DOM 操作更简洁、更具表现力，也更贴近现代 Web 开发中“关注点分离”与“语义化标记”的设计理念。