data-type 是区分元素类型的最直接方式，应使用小写纯字母字符串（如"button"），通过 getAttribute('data-type') 安全读取，配合 CSS 选择器批量定位，且不可用作状态开关。
用 data-type 区分元素类型最直接
如果你要靠 data 属性识别“这是个按钮还是卡片还是表单项”，data-type 是最常用、语义最清晰的命名。它不依赖 class 或标签名，也不需要额外 DOM 查询，只要读一个属性就能判断。
常见错误现象：element.tagName === "BUTTON" 误判自定义组件；或用 class 判断但 class 被动态增删导致逻辑断裂。
-
data-type值应为小写纯字母字符串，比如"button"、"card"、"input-field" - 避免用
data-role混淆——它更适合描述行为（如"toggle"），而非类型本身 - 服务端渲染时直接写死：
<div data-type="card" data-id="123">...，前端 JS 一查就知
getAttribute('data-type') 比 dataset.type 更稳
别默认用 dataset.type —— 它只在 HTML 中写的是 data-type 时才有效。一旦你写成 data-element-type 或 data_TYPE，dataset.type 就失效或返回 undefined，且不报错。
而 getAttribute('data-type') 直接按字面匹配，大小写敏感、无驼峰转换、不丢数字和下划线。
立即学习“前端免费学习笔记（深入）”；
- 要兼容未来可能的变体（比如
data-element-type="form"），统一走getAttribute() - 判断是否存在：用
el.hasAttribute('data-type')，比'type' in el.dataset更可靠 - 值为空字符串
""和null都算“有该属性”，需按业务决定是否过滤
结合 CSS 属性选择器批量定位同类型元素
不用遍历所有元素再逐个读 data-type，CSS 选择器能一步到位筛选。
例如，你想给所有 data-type="tooltip" 的元素绑定事件：
document.querySelectorAll('[data-type="tooltip"]')
注意几个易错点：
- 选择器中值必须加引号，
[data-type=tooltip]在某些特殊字符下会解析失败 - 区分大小写：
data-type="Tooltip"不会被[data-type="tooltip"]匹配到 - 支持部分匹配：
[data-type^="nav"]可选中data-type="nav-main"和data-type="nav-sub"
不要把 data-type 当状态开关用
data-type 是静态类型标识，不是运行时状态。把它当开关（比如从 "button" 改成 "disabled-button"）会导致类型判断逻辑混乱，也违背 HTML5 规范对 data- 属性的定位。
真正该变的是状态类或独立状态属性：
- 用
data-state="disabled"表示当前状态，data-type仍为"button" - 用
aria-disabled="true"同步可访问性，而不是靠改data-type - 频繁切换的类型建议交由组件框架管理，DOM 上只保留初始类型
复杂点在于：多个 data- 属性组合使用时（如 data-type="input" + data-kind="date"），必须明确主次层级，否则 selector 和 JS 判断容易嵌套过深、难以维护。
