data-*属性仅存储字符串，需js读取并逻辑匹配才能建立关系；正确配对要求html写data-id="42"、js用element.dataset.id读取，连字符自动转驼峰且仅支持小写命名。
data-* 属性本身不能“建立对应关系”，它只是把字符串挂到元素上；真正建立关系要靠 JS 主动读取 + 逻辑匹配，比如用 dataset.id 做键去查 Map 或遍历 DOM。
data-id 和 dataset.id 怎么配对才不丢值
HTML 中写 data-id="42"，JS 里必须用 element.dataset.id 读 —— 注意不是 dataset.ID 或 dataset["id"]。浏览器会把连字符转驼峰，但只认小写+连字符命名的原始属性。
- 错误写法：
data-ID="42"、data_id="42"、dataId="42"→dataset.id返回undefined - 数字开头的属性（如
data-2024-year）不能用点号访问，得写dataset["2024Year"] - 如果元素是服务端渲染出来的，确保 HTML 源码里确实存在该
data-属性，DOM 解析后才会进dataset
用 data 属性做双向查找时容易漏掉什么
常见场景是点击按钮更新对应列表项的状态，比如「展开/收起」或「标记已读」。这时候不能只靠 dataset，还要处理 DOM 结构嵌套带来的目标错位。
- 直接监听
e.target.dataset.itemId很危险：如果按钮里有<span>删除</span>，点击文字时e.target是span，它没有dataset - 正确做法是用
e.target.closest('[data-item-id]')向上找最近的带属性的祖先元素 - 若需跨容器匹配（比如按钮在侧边栏，内容在主区），建议统一用
data-group="chat-123"，再用document.querySelectorAll('[data-group="chat-123"]')批量获取所有相关节点
data 属性能当 map key 用吗？性能影响大不大
可以当 key 用，但仅限轻量映射。别把它当成 JS 的 Map 或 WeakMap 替代品 —— 它没哈希查找，每次 querySelectorAll('[data-id="42"]') 都是全 DOM 遍历。
- 少量元素（document.querySelector('[data-id="42"]') 直接查没问题
- 频繁查找或大量元素：先建一个缓存对象，比如
const idMap = new Map(); document.querySelectorAll('[data-id]').forEach(el => idMap.set(el.dataset.id, el)) - 注意：
dataset值始终是字符串，比较 ID 时别用===混淆类型，el.dataset.id === "42"是安全的，el.dataset.id == 42可能出错
最常被忽略的是：data 属性不会自动同步变化。你改了 JS 里的变量，DOM 上的 data- 值不会变；反过来，用 setAttribute 改了属性，也不会触发任何监听。需要对应关系持续有效，就得自己写同步逻辑，或者干脆放弃 data 属性、改用 Map + 元素引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
