本文介绍在 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"<blockquote>
<p>? <strong>注意</strong>： </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/2213" title="知了追踪"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679995357938.png" alt="知了追踪" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/2213" title="知了追踪" class="overflowclass">知了追踪</a>
<p class="overflowclass">一款AI开发辅助工具，主要用于AI智能信息助手，智能追踪你的兴趣资讯，适合需要提升相关任务效率的用户。</p>
</div>
<a rel="nofollow" href="/ai/2213" title="知了追踪" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>属性选择器语法为 <code>[attr="value"]</code>，需用方括号包裹，属性名与值之间用等号连接，值必须加引号（单/双均可）； </li>
<li>
<code>querySelector()</code> 返回第一个匹配项（推荐用于唯一目标），<code>querySelectorAll('[data]')</code> 则返回所有含 <code>data</code> 属性的元素； </li>
<li>若 <code>data</code> 属性值含空格、特殊字符或大小写敏感，请确保字符串完全一致；建议优先使用 <code>data-*</code> 标准命名（如 <code>data-item="table"</code>），增强可维护性与语义性。</li>
</ul>
</blockquote>
<p>此外，该方法不仅限于 <code>data</code> 属性，还可用于 <code>name</code>、<code>type</code>、<code>title</code> 等任意原生或自定义属性。例如： </p>
<pre class="brush:php;toolbar:false;">document.querySelector('input[name="username"]');
document.querySelector('button[type="submit"]');
综上，善用属性选择器是脱离“类名污染”与“ID 冗余”的关键实践，它让 DOM 操作更简洁、更具表现力，也更贴近现代 Web 开发中“关注点分离”与“语义化标记”的设计理念。
