原生 HTML 属性可替代大部分自定义 JS 逻辑：1. 用 form.elements 替代手动遍历表单节点；2. 用 popover 和 showModal() 替代浮层/模态框 JS 状态管理；3. 用 <output> + oninput 替代实时计算事件监听链；4. 用 aria-labelledby + 标题结构替代 JS 动态生成 aria-label。
原生 HTML 属性能替代大部分自定义 JS 逻辑，但前提是选对属性、用对场景——不是加个 role 就算数，而是让浏览器和辅助技术真正“理解”你的意图。
用 form.elements 替代手动遍历表单节点
很多脚本还用 querySelectorAll('input, select, textarea') 收集表单字段，再逐个判断类型、name、是否禁用。这既慢又容易漏掉 button 或 fieldset 内嵌控件。
-
form.elements是原生集合，自动包含所有可提交元素（含input、button、select、textarea、object），且顺序与 DOM 一致 - 单选/复选组直接通过
form.elements["name"]获取 NodeList，无需额外过滤 - 它天然响应动态增删：往表单里
appendChild()一个新input，它立刻出现在elements里 - 注意：
form[0]是兼容写法，但语义模糊；优先用form.elements[0]或form.elements["xxx"]
用 popover 和 showModal() 替代浮层/模态框 JS 状态管理
手写浮层常要管 z-index 层级、点击外部关闭、ESC 键监听、焦点锁、返回值收集——这些全被原生 API 消解了。
-
<div popover>自动进入 Top Layer，永远高于z-index，无需 CSS 调整 -
popovertarget属性触发显示，popovertargetaction="hide"控制隐藏，无 JS 也能交互 -
<dialog>的showModal()自带背景遮罩（::backdrop）、焦点捕获、ESC 关闭；dialog.returnValue直接读取关闭来源（如按钮value） - 不支持
popover的旧浏览器（如 Safari 16.4 之前）会降级为普通元素，需用@supports (popover: auto)做样式隔离
用 <output> + oninput 替代实时计算结果的事件监听链
常见场景：表单输入后实时显示总价、字符数、密码强度。传统做法是绑一堆 input、change、blur，再手动更新 DOM。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
-
<output for="price-input">显式关联输入源，屏幕阅读器能感知变化 -
<form oninput="total.value = Number(qty.value) * Number(price.value)">—— 浏览器原生触发，比 JS 事件更及时，且自动适配剪贴板粘贴、语音输入等非键盘操作 -
<output>元素本身有语义，读屏软件会读作“输出：¥299”，比span+aria-live更轻量、更可靠 - 注意：
for属性必须指向同表单内元素的id，不能用 name 或 class
用 aria-labelledby + 标题结构替代 JS 动态生成 aria-label
为图标按钮、图表、卡片加无障碍描述，很多人写 JS 拼字符串塞进 aria-label，但易出错、难维护、无法随内容更新。
- 直接用已有标题元素的
id：例如<h3 id="chart-title">Q2 用户增长</h3><svg aria-labelledby="chart-title">，读屏器自动读标题 - 组合多个 ID：
aria-labelledby="title desc"，适合需要补充说明的图表 - 避免覆盖原生语义：不要给
<button>加aria-labelledby，除非它内部没文本——原生按钮文本已自带 label - 当标题是动态渲染时，确保 ID 在 DOM 中真实存在后再设置
aria-labelledby，否则读屏器跳过
真正省掉 JS 的关键，不是找“替代方案”，而是先确认：这个交互是否已被 HTML 语义或平台能力覆盖？很多所谓“必须 JS 实现”的功能，其实只是没用对原生接口。
