Property(prop)和Attribute(attr)的区别
来源:互联网 发布:国产三维cad软件 编辑:程序博客网 时间:2024/06/05 06:27
举例来讲
我们现在有一个input#demo
<input id="demo" value="attr">
- Attribute和Property都被翻译成“属性”
- “value”就是input#demo的属性之一
- 也就是说,没错,就像你想的一样
- input#demo的 Attribute “value”值为”attr”
- input#demo的 Property “value”值同为”attr”
这时候你可能会问了:什么时候他们不一样?
wendehao!
当我们使用如下js代码对input#demo进行操作后
document.getElementbyId('demo').value='changed';
此时打开你浏览器的F12(Chrome的Devtool,FireFox的Firebug等等)
你会发现:
修改前是这样的
修改后是这样的
??????????????你在逗我呢吧
慌 不要慌 且看页面
修改前是这样的
修改后是这样的
没错 聪明的你可能已经想到了
.value = 'changed'
只修改了Attr与Prop之中的一个
.value
方法修改的是input#demo的Property
而当我们使用如下js代码时
document.getElementbyId('demo').setAttribute('value','changed');
此时你会发现更诡异的事情是
页面的值并没有发生改变
但是打开你的F12,你会发现value值发生了变化
得出结论
.setAttribute()
方法修改的是input#demo的Attribute
在这里引用一段 -T大大- 博客里的文字来更好的阐述这两者的区别
原文链接:http://blog.csdn.net/wangji5850/article/details/50925042 //图片请前往原文查看
此问题归根结底是由于DOM的property和attribute的区别:
attribute
input节点有很多属性(attribute):‘type’,’id’,’value’,’class’以及自定义属性,在DOM中有setAttribute()和getAttribute()读写DOM树节点的属性(attribute)
PS:在这里的getAttribute方法有一个潜规则,部分属性(input的value和checked)通过getAttribut取到的是初始值,这个就很好的解释了图2结果为什么为2。
property
JavaScript获取到的DOM节点对象,比如input
你可以将他看作为一个基本的js对象,这个对象包括很多属性(property),比如“value”,“className”以及一些方法,setAttribute,getAttribute,onclick等,值得注意的是对象的value的属性(property)取值是跟着输入框内的当前值一起更新的,这解释了图1中7为什么为200了。
所有在日常的工作中,推荐是使用 property,这样事情处理起来比较简单一些,attribute永远是字符串。。
阅读全文
0 0
- Property(prop)和Attribute(attr)的区别
- attribute和property,attr()和prop()的区别
- prop(Property)和attr(attribute)用法区别
- attribute attr prop 区别
- attr 和 prop 的区别
- attr()和prop()的区别
- attr和prop的区别
- attr()和prop()的区别
- prop 和 attr的区别
- prop和attr的区别
- prop()和attr()的区别
- prop()和attr()区别
- jquery attr和prop的区别
- jquery中attr和prop的区别
- jQuery函数attr()和prop()的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- 箭头>
- java反射有一大作用:反编译
- springboot 自定义文件 读取
- Python初入门(三)(Head First Python 第三章 文件与异常)
- 用正则表达式实验计算器功能
- Property(prop)和Attribute(attr)的区别
- UVa297 例题6-11 四分树(Quadtrees)
- 深入理解Java虚拟机学习笔记-3.JVM性能监控及故障分析工具
- 一些对项目有用的链接
- Bootstrap基础1——栅格
- 消息队列的使用方法
- MetaQ源码阅读及与Spring结合使用
- 7_26C语言|printf用法延伸+函数注释风格
- 牛客网前端工程师评估笔试题总结