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 一查就知 <h3> <code>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 选择器能一步到位筛选。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

  例如，你想给所有 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 判断容易嵌套过深、难以维护。