Property(prop)和Attribute(attr)的区别
举例来讲
我们现在有一个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永远是字符串。。
如果我的文章有帮上什么忙并且您也愿意赏个脸 就扫码领个红包吧(～￣▽￣)～
Property(prop)和Attribute(attr)的区别相关推荐
- prop和attr的区别
一.attr和prop含义的区别 attr 是从页面搜索获得元素值,所以页面必须明确定义元素才能获取值,相对来说较慢. prop是从属性对象中取值,属性对象中有多少属性,就能获取多少值,不需要在页面中 ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别.原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大 ...
- attribute attr prop 区别
attr 与 prop的区别是什么? 这篇微博解释的很清楚 那么,什么时候使用attr(),什么时候使用prop()? *添加属性名称该属性就会生效应该使用prop(); *是有true,false两 ...
- jquery中prop()方法和attr()方法的区别浅析
引用:http://www.jb51.net/article/41170.htm 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该 ...
- javascript prop和attr的区别
在网上找了一些资料,通过自己去寻找,尝试,此次做一次总结. 1/ attr()是jQuery 1.0版本就有的函数, prop()是jQuery 1.6版本新增的函数.毫无疑问,在1.6之前, ...
- prop和attr的区别-jQuery
今天简单说下prop和attr在设置,获取和删除属性时的区别: 1.设置属性 为了便于看到效果,先在网页中写入ul标签,里面插入属性title,如下: <ul><li title=& ...
- jquery中prop()方法和attr()方法的区别
tofixed: 四舍五入为指定小数位数的数字 tofixed(number) tofixed(2) 意四舍五入的位数为两位 jQuery 1.6 开始新增了一个方法 prop(); 1.添加属性名 ...
- getAttribute() 与 attr() 的区别
https://blog.csdn.net/xiphap/article/details/79397060 一直以为 getAttribute() 和 attr() 都是获取元素属性的方法,只是一种是 ...
- attribute与parameter区别
request.getParameter取得Web客户端到web服务端的http请求数据(get/post),只能是string类型的,而且HttpServletRequest没有对应的setPara ...
最新文章
- Python 内部：可调用对象是如何工作的
- 源代码管理-SVN自动更新
- 定义［nextTick、事件循环］
- 从零起步到Linux运维经理，你必须管好的23个细节
- 北京大学计算机学院周磊,马秀莉-北京大学信息科学技术学院
- Spring在多线程中bean的注入问题
- 如何配置RadASM
- 用python语言实现人工智能猴子摘香蕉的问题_人工智能猴子香蕉问题
- python 网格交易源码_文华财经网格交易源码
- [bzoj4540][莫队算法]序列
- Creo9.0 绘制中心线
- linux 库全局变量_C语言开发单片机为什么大多数都采用全局变量的形式？
- 计算机组装硬件要求,组装电脑必懂的硬件知识，全是干货，教你选购硬件不求人...
- 深度学习 tensorflow 三维矩阵乘法（batch 迭代必须搞懂的矩阵乘法，维度增加）
- 社区儿童计算机活动总结,幼儿园小班的社区活动总结
- 《Reading Wikipedia to Answer Open-Domain Questions》浅析
- day17_自动化的框架搭建
- android底层开发工具,Android Developer Tools（开发人员工具）
- 各个时区对应的时差表 及 python中时区获取方式（支持夏令时）
- 计算机图形学实验源码_计算机图形自动可微：MIT学神微分太极框架开源，论文被ICLR接收...