关于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