元素仅显示JavaScript计算结果，需手动赋值value或textContent才能更新内容；其value默认为空，不自动绑定表单数据，读取时须确保已执行JS赋值。
元素本身不“取”数据，它只负责**显示**由 oninput 或 onchange 触发的 JavaScript 计算结果。想让它更新内容，必须手动赋值给它的 value 属性或 textContent。
为什么直接读
因为 默认没有初始 value，且它不会自动绑定表单控件的值——它不像 那样自带双向数据流。你看到的结果，全是 JS 写进去的。
- 如果没执行过 JS 赋值，
document.querySelector('output').value是空字符串 -
的value属性是可写的，但必须显式设置（比如out.value = '123'） - 用
textContent也能读取显示内容，但注意：它会包含所有 HTML 实体和空格，而value更规范
怎样让
典型场景：两个 相加，结果实时显示在 中，并能被后续 JS 读取。
-
oninput比onchange更适合实时计算，它在输入过程中就触发 - 务必对
input.value做类型转换（parseInt/parseFloat），否则是字符串拼接 -
的name属性让它能被form.elements访问，方便统一取值
兼容性与常见坑点
在 IE 中完全不支持，在 Edge 13+、Chrome 10+、Firefox 4+ 中可用。生产环境需兜底。
立即学习“前端免费学习笔记（深入）”；
- 不支持时，
会被当作普通渲染，但value属性无效 —— 所以 JS 赋值逻辑仍要保留 - 别依赖
的for属性自动关联（如for="a b"），它只是语义提示，不触发任何行为 - 如果计算逻辑复杂，建议把逻辑抽到函数里，而不是全塞进
oninput行内表达式中，否则调试困难
真正关键的不是 标签本身，而是你有没有在合适时机、用正确方式把计算结果写进它的 value。漏掉赋值这步，它永远是空的。
