meter 元素无 javascript api 取值，仅通过绑定的 value 属性或外部变量获取数据；其 value 为只读反射属性，修改不触发事件，也不参与表单提交，本质是单向显示控件。
meter 元素本身不提供 JavaScript API 来“取数据”，它只是个只读的视觉呈现控件——想获取度量值，得靠你绑定的 value 属性或关联的 JS 变量，而不是从 meter 上读。
meter 的 value 属性是只读反射属性，不能反向驱动状态
你在 HTML 里写 <meter value="75" min="0" max="100"></meter>，JS 中读 meter.value 确实能拿到 75，但这只是对初始 value 属性的反射。如果你用 JS 改变 meter.value = 80，它会更新显示，但这个操作不会触发任何事件，也不会自动同步到其他变量或表单字段。
- 修改
meter.value不会触发input或change事件 -
meter没有oninput响应机制，无法像input[type=range]那样监听拖拽 - 它的作用纯粹是“展示”——适合仪表盘、进度概览等静态/半静态场景
真正可取值的场景：必须由外部逻辑控制 meter 的 value
所谓“取度量数据”，本质是你自己维护一个状态源（比如变量、<input type="hidden">、或表单字段），再用它驱动 meter 显示。反过来，“取”就是读那个源头，不是读 meter。
<input type="range" id="score" min="0" max="100" value="65"> <meter id="score-meter" min="0" max="100"></meter> <input type="hidden" id="score-value" value="65">
然后在 JS 中统一管理：
立即学习“前端免费学习笔记（深入）”；
const range = document.getElementById('score');
const meter = document.getElementById('score-meter');
const hidden = document.getElementById('score-value');
range.addEventListener('input', () => {
const val = Number(range.value);
meter.value = val;
hidden.value = val;
// ✅ “取数据”时，读 hidden.value 或直接用 val
});
// ❌ 不要这样做：meter.addEventListener('input', ...) —— 不会触发
误用 meter 导致的典型错误现象
开发者常以为 meter 能像 progress 一样被 JS 动态驱动并反馈，结果遇到这些情况：
- 监听
change事件无响应 →meter不支持用户交互，没有原生事件 - 用
form.elements提交时收不到meter的值 → 它不是表单控件，不参与表单序列化 - SSR 渲染后 JS 修改
value但 UI 不更新 → 实际会更新，但若没设置min/max，浏览器可能按默认范围（0–1）缩放，导致视觉异常
关键点就一个：meter 是“单向显示器”，别指望它吐数据出来。所有可取的值，都得来自你主动维护的那个唯一真相源。
