前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于html的input元素,property和attribute的区别

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

作者头像
Bruce Li
发布2019-07-30 16:48:14
1.7K0
发布2019-07-30 16:48:14
举报
文章被收录于专栏:天马行空布鲁斯

之前在项目中遇到一个很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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 天马行空布鲁斯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档