关于html的input元素，property和attribute的区别

之前在项目中遇到一个很tricky的关于html的input元素的问题，个人觉得挺有意思，于是记录下来。这个问题也是在ui的自动化测试中，可能会碰到的一个问题。

为了简化起见，抽象这个问题的原型如下：

有一个html页面，页面包含一个input框，当改变input框的值的时候，按F12观察页面源码，发现input框的value值和用户输入不一致，并且看到的value永远是初始值，这是什么原因呢？如下图：

网上查询了一些资料，有一篇文章[参见reference1]解释的很好。

简单讲，其实这问题涉及到property和attribute的区别。attribute是html页面中某个元素element的属性，如id，class，value等。而property是javascript对象的一个属性，html页面被浏览器渲染的过程中，每一个element都会创建一个相应的javascript对象，而所有的attribute会被装载到attributes这个property上，这个attributes是一个array。如下图所示：

可以看到attributes[1]的值就是html value attribute的值，这个值不会随着input框输入值的变化而变化。

那么怎样才能拿到反应用户输入的实时的值呢？

其实这个问题也常常是在写ui自动化测试脚本的时候可能会碰到的一个问题。举个例子：一个ui的自动化测试脚本(自动化测试的工具可能是nightwatch，selumun等)，通过dom api获取一个input框的值，根据这个值是否为null采取不同的逻辑，如果这个dom api用得不对，可能拿到的值就是初始值。

从参考文档里面了解到，以下三种方式都可以拿到value的值：

this.document.getElementById("test_input_issue").value

this.document.getElementById("test_input_issue").getAttribute("value")

this.document.getElementById("test_input_issue").defaultValue

第一种方式才能拿到实时的用户输入的值，其余两种方式拿到的都是初始值，如下图所示。当用户输入一个值之后，浏览器只是更新了input框对应的javascipt对象的value属性，所以，按F12观察源码显示的是初始值。

References

https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html

https://blog.csdn.net/zhy13087344578/article/details/79036967