output.value是唯一合法的脚本写入方式，必须用value属性而非textcontent或innerhtml，因其保障表单语义、重置同步、服务端接收及无障碍支持。
output.value 是唯一合法的脚本写入方式
直接给 output 元素赋值，必须用 output.value，不是 textContent，也不是 innerHTML。虽然部分浏览器对 textContent 有兼容性表现（能显示），但它绕过了表单语义层：表单重置时不会清空、form.elements.xxx.value 读不到、服务端收不到该值。
关键事实：output 元素在 HTML 规范中确实定义了可读写的 value 属性（尽管它没有 value HTML 属性），且该属性与初始 HTML 内容同步——比如 <output id="sum">0</output> 初始化后，output.value 就是 "0"，后续所有 JS 更新都应基于此。
为什么 output.textContent = "x" 看似有效却危险
常见错误现象：写 output.textContent = "123" 后页面显示正常，但紧接着 console.log(output.value) 返回空字符串或旧值；提交表单时后端收不到该字段；Safari 中还可能出现视图和值长期脱节。
-
textContent只修改渲染文本，不触发表单 API 的状态同步 - 首次读取
output.value时，若没显式赋过值，它可能为空（即使 HTML 里写了内容） - 屏幕阅读器依赖
value属性播报，textContent修改的内容可能被跳过或误读
for 属性只是语义提示，不自动绑定计算逻辑
for 属性本身不触发任何行为，它只用于声明“这个 output 和哪些控件相关”，方便开发者或辅助技术理解上下文。真正驱动更新的，必须是 JS 监听 + 手动赋值。
使用场景示例：
对应 JS 必须写：
const a = document.getElementById('a');
const b = document.getElementById('b');
const sumOut = document.querySelector('output[name="sum"]');
const update = () => sumOut.value = (+a.value || 0) + (+b.value || 0);
a.addEventListener('input', update);
b.addEventListener('input', update);
IE 不支持 output，但现代浏览器全兼容
IE 所有版本均不识别 <output></output> 标签，会将其当作未知 inline 元素处理，for 绑定失效，value 属性不可读写。若需兼容 IE，必须降级为 <span></span> + 隐藏 <input type="hidden"> 模拟行为。
其他浏览器（Chrome、Firefox、Safari、Edge，含移动端）均原生支持，且行为一致。唯一要注意的是：不要在初始化时写 <output value="0"></output>，因为 value 是 JS 属性，不是 HTML 属性，该写法会被忽略；正确写法是 <output>0</output>。
容易被忽略的一点：output 的 value 是字符串类型，做数值计算前务必手动转换（如 +output.value 或 parseFloat()），否则拼接字符串而非相加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
