是否有文档说明页面内容变更时DOM元素属性不会同步更新？

这其实是**DOM属性（property）和HTML属性（attribute）**的核心差异导致的，属于浏览器DOM的标准行为：

• 首先，HTML属性（就是你在Elements面板里看到的value="value01"这类）是页面加载时从HTML源码解析出来的初始值，它们被保存在元素的attributes集合里，代表元素的「初始状态」。
• 而DOM属性是元素对象（比如你用document.querySelector获取到的form_input）上的属性，是动态状态，会随着用户交互、JS操作实时变化。

对于<input>这类表单元素，value属性和valueDOM属性是单向同步的：

• 页面初始化时，HTML属性的value会赋值给DOM属性的value；
• 但反过来，当你通过JS修改DOM属性form_input.value = 'value012'时，只会更新当前的动态状态，不会同步回HTML属性——这就是为什么你在控制台能看到新的value值，但Elements面板里的HTML属性还是原来的value01。

如果想要同时更新HTML属性，你需要调用元素的setAttribute方法：

form_input.setAttribute('value', 'value012')

这时候Elements面板里的value属性才会跟着变化，同时DOM属性也会被更新。

类似的情况还出现在checked、selected这类表单元素的属性上：比如你点击复选框改变选中状态，DOM的checkedproperty会变成true，但HTML的checkedattribute（如果初始没有的话）不会自动添加，它始终代表元素的初始选中状态。

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