data-article-id 必须全小写加连字符，如 data-article-id="123"；驼峰、下划线等写法无效，js 读取为 undefined；推荐用 getattribute() 而非 dataset 读取，确保获取原始字符串；编号应始终视为字符串处理，避免隐式转换；不可用作动态状态容器，响应式更新应依赖 js 状态管理。
data-article-id 必须全小写加连字符
HTML 中只有 data-article-id 这种写法才被浏览器识别为合法 data 属性；data-articleId、data_article_id、data-Article-ID 全部无效，JS 里读出来是 undefined，DevTools 里也看不到该属性。
常见错误现象：<div data-articleid="123"> 写进去了，但 <code>el.dataset.articleId 返回 undefined——不是 JS 错了，是浏览器压根没解析它。
- 服务端模板（如 Django、Twig）拼 HTML 时容易混用驼峰或下划线，务必统一转成连字符格式
- 如果编号含字母或符号（如
"ART-2024-001"），仍可用data-article-id，只要值是字符串就行 - 纯数字开头的命名（如
data-1st-article）语法合法，但 JS 中不能用点号访问，得用方括号：el.dataset["1stArticle"]
读取时优先用 getAttribute() 而非 dataset
直接用 el.getAttribute('data-article-id') 更稳。它不依赖驼峰转换规则，不隐式丢值，返回的就是 HTML 里写的原始字符串。
为什么不用 el.dataset.articleId？因为：一旦 HTML 里不小心写了 data-articleId（驼峰），dataset.articleId 就永远取不到；而 getAttribute() 至少能读到原始字符串，方便你快速定位命名错误。
-
el.getAttribute('data-article-id')→ 返回"123"（字符串） -
el.dataset.articleId→ 若 HTML 是data-article-id，才返回"123"；否则undefined - 判断是否存在？用
el.hasAttribute('data-article-id')，比el.dataset.articleId !== undefined更准确
存编号别自动转数字，保持字符串语义
data-article-id="007" 和 data-article-id="7" 是两个不同编号，但如果你用 +el.getAttribute('data-article-id') 强转，"007" 就变成 7，信息丢失。
文章编号本质是业务标识符，不是数学量。除非后续明确要参与计算，否则一律当字符串处理。
- 比较编号是否相等？用
===，不是== - 传给 API？直接用字符串，避免
String(7)或模板字符串二次包装 - 需要补零或格式化？在 JS 里做，不要靠 HTML 属性“存成 007”来取巧
别把 data-article-id 当状态容器用
它只适合存初始加载时就确定的静态编号，比如服务端渲染出的列表项 ID。页面运行中动态改它（比如点击后更新为新文章 ID），CSS 不会重匹配 [data-article-id]，其他 JS 也不一定立刻感知。
真正需要响应式更新的场景（如当前选中文章、分页状态），应该用 JS 变量或状态管理库，DOM 上只呈现结果。
- 刷新页面后，
data-article-id的值还在，是因为 HTML 没变，不是它“持久化”了 - 用
el.setAttribute('data-article-id', '456')能改 DOM，但不会触发 MutationObserver，也不会让[data-article-id="456"]的 CSS 立即生效 - 想让按钮根据当前文章 ID 切换样式？用 class 控制，别依赖 data 属性值变更驱动 CSS
