input.value 始终是字符串，无论 type 属性为何；应使用 valueasnumber/valueasdate 获取原生类型值，data-* 属性需按驼峰规则访问，自定义属性重命名须先读再写后删。
input.value 始终是字符串，别指望浏览器自动转数字
无论你写 type="number"、type="date" 还是 type="range"，JavaScript 读取 element.value 拿到的永远是字符串。这不是 bug，是规范行为——浏览器只做格式约束和 UI 适配，不负责类型归一化。
常见错误：直接用 "42" + 8 得到 "428" 而不是 50；或对空输入调 parseInt("") 得到 NaN，后续计算崩掉。
-
type="number"：输入"100"→value === "100"，不是100 -
type="date"：输入"2026-06-23"→value === "2026-06-23"，不是Date对象 -
type="checkbox"：勾选时value仍是"on"，判断状态必须用checked
用 valueAsNumber / valueAsDate 替代手动解析（仅限部分 type）
HTML5 提供了两个只读属性，能在特定 type 下安全获取原生类型值，比 parseInt 或 new Date() 更可靠。
它们不依赖字符串内容，而是由浏览器内部解析后直接暴露数值，避免了空值、格式错位等边界问题。
-
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" 没问题，但 JS 里必须通过 element.dataset.userId 访问，不是 dataset.userid 也不是 dataset["user-id"]。连字符会自动转为驼峰，且全小写开头。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
这个转换是单向的：DOM 写入时用驼峰，渲染到 HTML 里仍显示为短横分隔。值始终是字符串，哪怕你写了 data-count="42"，dataset.count 也是 "42"。
- 正确：
data-api-key→dataset.apiKey - 错误：
data-API-Key（大写 A/K）→dataset.aPIKey（浏览器按小写连字符重映射） - 别用
getAttribute("data-user-id")替代dataset.userId，前者返回原始字符串，后者已按规则归一化
自定义属性重命名必须三步走，不能只 setAttribute
HTML 没有 “rename attribute” 操作。想把 data-old 改成 data-new，必须显式执行：读值 → 写新名 → 删旧名。
漏掉 removeAttribute 会导致新旧属性共存，后续逻辑可能读错字段，尤其在批量处理或框架数据绑定场景下极易出错。
- 先校验元素存在：
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" 都写全，提交表单时后端收到的依然是字符串 —— 后端该校验还得校验，该转类型还得转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
