JavaScript设置隐藏字段值异常：控制台值显示不一致问题排查

我在非自有页面中，用以下JavaScript代码设置class为class1的隐藏input字段值：

let hiddenField = document.querySelectorAll('input[type="hidden"].class1');
for (k = 0; k < hiddenField.length; k++) {
        console.log("previous value: " + hiddenField[k].value);
        hiddenField[k].value = hiddenValue;
        console.log("new value: " + hiddenField[k].value);
        console.log(hiddenField[k]);
}

出现异常：两个目标字段中仅一个设置成功。控制台打印hiddenField[k].value时第二个字段值显示已设为4.5，但打印元素本身时其value属性仍为0，请问这是什么原因？

• 页面框架的状态重置
  如果目标页面是用React、Vue这类前端框架开发的，框架会通过虚拟DOM管控元素状态。你直接修改DOM的value属性（property）后，框架在后续的渲染更新中，会把元素值同步回它维护的原始状态，导致你看到的修改被覆盖。这种情况下，你改的只是DOM表层的值，框架的内部状态没同步。

• 其他脚本的异步修改
  第二个字段可能绑定了事件监听（比如input、change），或者页面里有其他脚本在监听DOM变化。你修改值后，这些逻辑被触发，异步把值改回了0。控制台打印value时是刚修改后的状态，但后续脚本执行又重置了值，所以你展开DOM元素看到的是修改后的值。

• 控制台的实时引用特性
  浏览器控制台打印的DOM元素是实时引用，不是打印那一刻的快照。你打印元素时，它的value可能已经被后续脚本修改了，而你打印hiddenField[k].value是在修改后立刻执行的，所以两者显示不一致。

• 暂停页面JS执行：打开控制台后按F8（暂停按钮），再执行你的修改代码，查看元素值是否还会被重置，以此确认是不是其他脚本在异步修改。
• 添加断点调试：在修改value的代码后加debugger;，断点触发后，一步步查看后续执行的代码，看有没有其他逻辑修改这个元素的value。
• 修改元素的attribute而非property：尝试用hiddenField[k].setAttribute('value', hiddenValue)设置值，再用getAttribute('value')查看结果，看是否能同步显示。

内容的提问来源于stack exchange，提问作者JayJona