如何修改DOM中类名下元素的属性真实值？解决点击按钮值回退问题

嘿，我刚好遇到过类似的坑，来给你掰扯清楚～

首先得搞懂一个核心区别：input元素的**HTML属性（Attribute）和DOM对象属性（Property）**是完全分开的两个东西：

• 你写在标签里的value="5"是HTML属性，它是这个input的初始值，存在DOM的attributes集合里。用setAttribute("value", 1)修改的就是这个初始值，但浏览器渲染input显示的是DOM对象的value属性，所以页面不会同步更新，而且这个初始值只会在页面加载或表单重置时生效。
• 而element.value = 1修改的是DOM对象的property，这个是当前页面显示的实时值，所以页面会立刻变化，但这个修改不会同步回HTML属性里。

你遇到的点击按钮后值回退的情况，大概率是这两种原因之一：

1. 你的按钮是表单重置按钮（<input type="reset">）：点击它时，浏览器会把所有表单元素的value property恢复到对应的HTML attribute初始值，所以你只改了property没改attribute的话，就会回退到旧值。
2. 按钮的处理逻辑没读取DOM对象的value属性，反而错误地读取了HTML attribute（比如用getAttribute("value")），那拿到的自然是没修改过的初始值。

正确的修改方式 #

要同时解决页面显示和值回退的问题，你需要同时修改property和attribute：

// 先获取目标元素
const targetInput = document.getElementsByClassName("has-input")[0];
// 1. 修改DOM property，更新页面显示的实时值
targetInput.value = 1;
// 2. 修改HTML attribute，同步初始值，防止重置时回退
targetInput.setAttribute("value", 1);

如果你的按钮不是重置按钮，只是后端或逻辑读取值的问题，那只要确保读取的是targetInput.value（DOM property）而不是getAttribute("value")，只修改targetInput.value = 1也能解决问题，但同步修改attribute更稳妥，避免后续出现意外情况。

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