属性选择器必须用方括号[]包裹，值必须加引号；[data-category]匹配存在该属性的元素，[data-category="javascript"]要求值完全相等且区分大小写，加i标志可忽略大小写，缺引号或拼写错误则完全不生效。
直接用 document.querySelectorAll() 配合属性选择器就能筛选，但写错格式、忽略大小写或没处理特殊字符，元素就永远选不到。
data-属性选择器怎么写才生效
属性选择器是 CSS 语法，不是 HTML 功能，必须严格按规则写。浏览器对拼写、连字符、引号、大小写全敏感。
-
[data-category]正确 —— 只要存在该属性，不管值是什么 -
[data-category="javascript"]正确 —— 值必须**完全等于**字符串 "javascript"（不能多空格、不能大小写混用） -
[data-category="java script"]会失效 —— 值含空格时必须加引号，否则解析中断 -
[data-category=javascript]失效 —— 缺引号，遇到连字符或空格直接报错 -
[data-category="JavaScript" i]可匹配小写 "javascript" ——i标志忽略大小写（Chrome 55+/Firefox 49+ 支持）
用 JavaScript 批量筛选多个 data 值时的性能陷阱
当你要匹配 ['red', 'blue', 'green'] 这类数组时，别循环调用 querySelectorAll() —— DOM 查询开销大，且可能重复添加同一元素。
- 低效写法：
validValues.map(v => document.querySelectorAll(`[data-color="${v}"]`)) - 推荐写法：先全量取一次，再用
Array.from().filter()二次筛选 const all = Array.from(document.querySelectorAll('[data-color]'));const matched = all.filter(el => validValues.includes(el.dataset.color));- 若
validValues超过 100 项，这种写法比多次querySelectorAll()快 3–5 倍（实测于 Chrome 128）
dataset 和 getAttribute 读值不一致怎么办
同一个 data- 属性，用 el.dataset.xxx 和 el.getAttribute('data-xxx') 读出来可能不同 —— 不是 bug，是机制差异。
立即学习“前端免费学习笔记（深入）”；
-
dataset是内存映射，只反映 JS 修改过的值；getAttribute读的是原始 HTML 或当前 DOM 属性快照 - SSR 页面首次加载时，
dataset可能为空，但getAttribute能立刻读到服务端渲染的值 - 写入必须用
el.setAttribute('data-xxx', 'val')，否则dataset.xxx不同步 - 判断属性是否存在，优先用
'xxx' in el.dataset，而不是el.dataset.xxx !== undefined（后者在未定义时返回空字符串）
特殊字符和多值 data 属性怎么安全匹配
用户输入、后端返回或国际化内容里常含引号、方括号、逗号、空格 —— 直接拼进选择器会崩溃或漏匹配。
- 值含双引号？用单引号包裹：
[data-title='John "The Boss" Doe'] - 值含单引号？用双引号包裹：
[data-desc="It's a test"] - 值含引号又含空格？用
CSS.escape()转义：[data-name="${CSS.escape(value)}"]（Firefox 63+/Chrome 65+） - 多值如
data-tag="react, vue, svelte"？别用includes()，改用split(',').map(s => s.trim()).includes(target) - 空值容错：
el.getAttribute('data-brand') || ''，因为未设置时返回null，不是空字符串
真正卡住人的从来不是“会不会写”，而是属性名拼错了、大小写没对齐、转义漏了，或者 dataset 和 setAttribute 混着用导致值漂移 —— 这些地方一错，控制台不报错，元素就是不出现。
