HTML5交互需用addEventListener绑定事件、textContent操作语义化标签内容、value属性读写表单新控件，并注意及时解绑监听器、避免内存泄漏及浏览器兼容性问题。
怎么给 HTML5 元素绑定点击事件
直接用 addEventListener，别用 onclick 属性。前者支持多个监听器、更易维护，后者容易被覆盖，且无法解绑。
- 常见错误：在循环里给多个
<button></button>绑事件时，用var i+onclick = function() { console.log(i) }，结果全输出最后一个值——改用let i或闭包，或者直接在事件回调里用event.target - 使用场景：按钮、表单控件、Canvas 区域、自定义 Web Component 内部交互
- 兼容性：所有现代浏览器都支持
addEventListener，IE8 及以下要用attachEvent（现在基本不用考虑）
怎么读取和修改 HTML5 新增的语义化元素内容
<article></article>、<section></section>、<aside></aside> 这些标签和 <div> 一样，用 <code>textContent 或 innerHTML 操作就行，没有特殊 API。
- 容易踩的坑：
innerHTML会触发 HTML 解析，可能执行内联脚本或引发 XSS；纯文本更新优先用textContent - 参数差异：
textContent会合并空白符、忽略 HTML 标签；innerText受 CSS 影响（比如display: none的内容不计入），行为不一致，建议避开 - 性能影响：频繁设置
innerHTML会重排重绘，大量动态内容推荐用DocumentFragment批量插入
怎么用 JS 操作 HTML5 表单新特性（如 date、range、output）
这些输入控件的值通过 value 读写，但类型和格式必须匹配——比如 <input type="date"> 的 value 是字符串格式 "2024-06-15"，不是 Date 对象。
- 常见错误现象：
input[type="range"]的value是字符串，直接参与计算会隐式转成数字，但没出错就容易忽略；input[type="number"]空值时value是空字符串，不是0或null - 联动技巧：
<output></output>标签配合oninput实时显示计算结果，比如滑动range时更新output的textContent - 兼容性注意：Safari 对
datetime-local支持差，移动端 date picker 行为不统一，生产环境建议用轻量级日期库兜底
怎么避免 HTML5 + JS 交互中的常见内存泄漏
最常发生在事件监听器没清理、闭包持有 DOM 引用、或定时器没清除这三类情况。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：单页应用中切换页面时，旧组件卸载了但它的
addEventListener还挂在 DOM 上；或者用setInterval轮询，组件销毁后没调clearInterval - 实操建议：给监听器起名函数（非匿名），方便 later 用
removeEventListener；用WeakMap存储与 DOM 元素关联的状态，避免强引用阻碍 GC - 调试提示：Chrome DevTools 的 Memory 面板可录制堆快照，对比前后看哪些节点没被释放——尤其留意控制台报 “Detached DOM tree” 的警告
valueAsNumber 比 parseInt(value) 更可靠、以及 Safari 里 input[type="color"] 的 value 默认值到底是啥。
