请提供需要改写的原标题。

在Web开发中，data-*自定义属性是高频使用的工具，但关于如何读取它，却存在一个普遍误区。很多人习惯性地使用dataset属性，认为它更现代、更方便。然而，一个更底层、更可靠的方法往往被忽略了。

开门见山地说，getAttribute('data-xxx')才是最稳妥、最直白的读取方式。别一上来就用dataset，它在命名不规范、包含数字、大小写混用，或者你需要原始字符串值时，可能会静默失败，让你在调试时一头雾水。

为什么 getAttribute('data-xxx') 比 dataset.xxx 更可靠

核心区别在于，dataset是浏览器对data-*属性进行的一层“语法糖”封装。这层封装有严格的规则：它只识别全小写并用连字符连接的属性名，然后将其转换为驼峰命名。

例如，HTML中的data-user-id，在JavaScript里可以通过dataset.userId访问。问题在于，一旦属性名不符合转换规则，比如包含数字（data-1st-load）、大写字母（data-apiKey）、下划线（data_user_id）甚至空格，dataset就完全无法访问到该属性，而且不会报错，只会默默返回undefined。

相比之下，getAttribute()没有任何限制。它直接读取HTML源码中写下的原始字符串，兼容所有合法的data-*名称。更重要的是，它返回的就是你写的那个值，包括空字符串""、字符串"0"、字符串"false"，不会擅自进行隐式类型转换。

几个典型场景可以帮助你理解：

• 遇到复杂的属性名，如data-api-endpoint="https://api.example.com/v2"？直接用getAttribute('data-api-endpoint')，简单省心。
• 服务端渲染直接输出了JSON字符串，比如data-initial-state='{"count": 10}'？你必须使用getAttribute获取原始字符串，再用JSON.parse()解析，并且务必加上try/catch来处理可能的格式错误。
• 只想判断某个data-属性是否存在（不管它的值是什么）？使用el.hasAttribute('data-disabled')比判断el.dataset.disabled !== undefined要准确得多，因为后者在属性值为空字符串时也会返回undefined。

dataset 适合什么场景，又有哪些坑

当然，dataset并非一无是处，但它不是getAttribute的升级版，而是一个语义更窄的“快捷通道”。它最适合处理那些纯配置类的简单字段，比如开关标记、索引编号、角色类型，并且属性名严格遵守“全小写连字符”的命名规范。

• 推荐用法：像data-role="menu-item"这样的属性，用el.dataset.role读取确实很简洁。
• 写入时的坑：当你执行el.dataset.enabled = true时，实际存储的是字符串"true"，而不是布尔值true。这一点和getAttribute/setAttribute的行为是一致的，但容易被忽略。
• 与DOM和CSS的联动问题：通过dataset赋值后，对应的HTML属性确实会同步更新。但这里有个关键细节：这种更新不会触发MutationObserver对属性变化的监听。更隐蔽的是，CSS中基于属性（如[data-enabled]）的选择器也不会自动重新匹配。如果你希望CSS能响应data-值的变化，最可靠的方式是手动调用el.setAttribute('data-enabled', 'true')。

jQuery 里 .attr('data-xxx') 和 .data('xxx') 完全不是一回事

在jQuery时代，这个混淆就更常见了。很多人以为.data('xxx')是jQuery对dataset的封装，其实并非如此。jQuery的.data()方法维护了一套独立的内存缓存。

它的工作流程是：首次调用.data('xxx')时，它会去查找元素上的data-xxx属性，读取并进行“智能”解析（比如把"123"转成数字123，把"true"转成布尔值true），然后将结果存入缓存。之后再次调用，它就只从缓存读取，完全不再查询DOM。

这会导致几个典型问题：

• 想读取HTML中的原始字符串值？必须用.attr('data-config')。
• 修改值后，想让其他JS代码或CSS选择器立刻看到？必须用.attr('data-status', 'loading')，而不是.data('status', 'loading')，因为后者只更新了内部缓存。
• 最让人头疼的bug就是混用两者导致的“数据不同步”：你用.attr()设置了值，另一段代码用.data()读到的还是旧的缓存值，因为.data()还没被触发去重新读取DOM。

CSS 里用 [data-*] 选择器必须加引号

最后，把视角转向CSS。在使用属性选择器时，一个不起眼但至关重要的细节是：必须给属性值加上引号。

写[data-status=active]看起来省事，但只要实际属性值里包含空格、点号、连字符或引号本身（比如data-status="in-progress"），这个选择器就会完全失效。这是CSS规范的要求，属性值若包含特殊字符，必须用引号包裹。

• 安全的写法只有两种：[data-status="active"] 或者 [data-status~="active"]（后者用于匹配由空格分隔的单词列表中的某一个）。
• 注意“无值”判断的陷阱：选择器[data-id]会匹配所有设置了data-id属性的元素，包括data-id=""（空值）和data-id="0"。如果只想选择值非空的元素，需要写成[data-id]:not([data-id=""])。
• 服务端渲染的安全警示：如果data-属性的值来自用户输入，那么在输出到HTML前，务必进行HTML实体编码。否则，未转义的引号会破坏HTML结构，甚至可能引发XSS安全问题。

说到底，data-*属性真正的麻烦从来不是简单的读取或写入。而是当它被开发者当成万能的“状态容器”、“配置中心”甚至“JSON传输通道”时，大家往往忘记了它的本质只是一个字符串存储槽。这个值从哪里来、怎么转换、如何防止注入、变化后如何被监听——每一个环节都需要单独的、谨慎的兜底处理。