先给出几个核心结论：HTML 输入组件的类型属性，本质上仅负责控制浏览器展示的控件样式与输入格式校验，并不会自动将值转换为 JavaScript 中的数字或日期对象。这是许多前端初学者容易踩中的第一个陷阱。接下来，我们来梳理几个必须理解透彻的关键知识点。
切勿指望浏览器自动进行类型转换，input.value 永远、始终是一个字符串
无论你在 HTML 中设置 type="number"、type="date" 还是 type="range"，当通过 JavaScript 读取 element.value 时，返回的始终是字符串类型。浏览器只负责将用户输入格式校准为符合规范的字符串，而不会将其转换为数字或 Date 对象。这不是程序缺陷，而是规范明确规定的行为。
一个典型的错误示例："42" + 8 的结果是 "428"，而非 50；又如，当输入框为空时，parseInt("") 会返回 NaN，导致后续计算直接崩溃。
type="number"：你输入"100"→ 读取的value是"100"，并非数字100type="date"：你选择"2026-06-23"→value依旧是"2026-06-23"，而不是Date对象type="checkbox"：勾选时value仍然为"on"这个字符串，判断是否选中必须使用checked属性
善用 valueAsNumber / valueAsDate 避免手动解析的繁琐（但并非万能解决方案）
HTML5 提供了两个只读属性——valueAsNumber 和 valueAsDate，专门用于处理这类类型转换问题。它们不是基于字符串内容二次解析，而是由浏览器内部直接返回原生类型值，能够有效规避空值、格式错误等边界情况。
- 当
input.type为"number"或"range"时，优先使用element.valueAsNumber：空输入返回NaN，非法输入同样返回NaN，但合法数字直接以number形式呈现。 - 当
input.type为"date"、"month"、"week"时，使用element.valueAsDate：返回一个Date实例，无效输入返回null（而非Invalid Date）。 - 仍需关注兼容性：
valueAsNumber在旧版 Edge 上可能不可用；valueAsDate在 Safari 14.1 及以上版本才稳定支持。
data-* 属性的驼峰转换，切勿靠猜测
你编写 data-user-id="123" 看起来正确，但在 JavaScript 中，必须通过 element.dataset.userId 来访问，而不是 dataset.userid，更不是 dataset["user-id"]。浏览器会自动将连字符转换为驼峰格式，并将首字母小写——这是一种单向映射。
- 正确示例：
data-api-key→dataset.apiKey - 常见错误：
data-API-Key这种写法会因大写字母被浏览器重新映射为小写，结果变成dataset.aPIKey，并非你期望的形式 - 避免偷懒使用
getAttribute("data-user-id")代替dataset.userId，前者返回原始字符串，后者已经按规则归一化
自定义属性的重命名不能仅用 setAttribute，必须分三步执行
HTML 没有“重命名属性”的原生操作。若要将 data-old 改为 data-new，必须严格遵循三步流程：先读取旧值，再写入新属性，最后删除旧属性。缺少任何一步都会导致问题。
最常见的错误是只执行 setAttribute，结果新旧属性并存，后续逻辑可能读取到错误的数据。在批量处理和数据绑定的场景中，这种问题尤为隐蔽。
- 先确保元素存在：
if (!el) return - 再判断旧属性是否真实存在：
const v = el.getAttribute("data-old"); if (v === null) return - 按顺序执行：
el.setAttribute("data-new", v); el.removeAttribute("data-old") - 此规则不适用于
class、style、value这类反射属性，它们必须通过对应的 DOM 属性操作，如el.className、el.value，否则不会同步更新。
最容易被忽略的一点是：所有的类型转换都发生在 JavaScript 层面，HTML 标签本身不具备语义化的类型转换能力。即便你把 type="number" 和 step="1" 都设置齐全，提交表单时后端收到的依然是字符串——后端该做的校验和类型转换，一样不能省。
