JavaScript中property和attribute的区别详细介绍


Posted in Javascript onMarch 03, 2015

1. 定义

Property:属性,所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型,对大小写敏感,自定义的property不会出现在html代码中,只存在js中。

Attribute:特性,区别于property,attribute只能是字符串,大小写不敏感,出现在innerHTML中,通过类数组attributes可以罗列所有的attribute。

2. 相同之处

标准的 DOM properties 与 attributes 是同步的。公认的(非自定义的)特性会被以属性的形式添加到DOM对象中。如,id,align,style等,这时候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作属性。不过传递给getAttribute()的特性名与实际的特性名相同。因此对于class的特性值获取的时候要传入“class”。

3. 不同之处

1).对于有些标准的特性的操作,getAttribute与点号(.)获取的值存在差异性。如href,src,value,style,onclick等事件处理程序。
2).href:getAttribute获取的是href的实际值,而点号获取的是完整的url,存在浏览器差异。

<script>

      var a  = document.body.children[0]

      a.href = '/'

      alert( 'attribute:' + a.getAttribute('href') ) // '/'

      alert( 'property:' + a.href )  // IE: '/', others: full URL

  </script>

src的值的获取类似href,不过IE也会返回full URL;
value值同样存在一些 ‘one-way'(单向)同步的内置属性。
例如,input.value 从 attribute 中同步(即 property 从 attribute 中获得同步)

<input type="text" value="markup">

  <script>

       var input = document.body.children[0];

       input.setAttribute('value', 'new');

       alert( input.value ); // 'new', input.value changed

       alert( input.getAtrribute(value) ); // 'new'

  </script>

但是 attribute 不能从 property 中获得同步:

<input type="text" value="markup">

   <script>

        var input = document.body.children[0];

        input.value = 'new';

        alert(input.getAttribute('value'));  // 'markup', not changed!

  </script>

getAttribute获取的是初始值,而点号获取的是初始值或者.value修改后的值,例如当访问者输入了某些字符后,'value' attribute 在 property 更新后维持了原始值。原始值可以用来检验 input 是否变化,或者重置它。

对于style和onclick等事件处理程序,getAttribute方法访问时会返回字符串,而点号返回的是相应的对象和事件处理函数。

对于input中的checked属性

<script>

    var input  = document.body.children[0]

    alert( input.checked ) // true

    alert( input.getAttribute('checked') ) // empty string

  </script>

getAttribute获取的是你是实际设置的值。而点号返回的是布尔值。

浏览器兼容性上的差别

1.在IE<9的浏览器中,可以用点号和getAttribute在相互之间访问自定义属性。
2.IE<8(包括IE8种的IE7兼容模式),property和attribute相同。因为attribute对大小写不敏感,在这种情况下,用getAttribute访问特性的时候,浏览器会选择第一次出现的值。

document.body.abba = 1 // assign property (now can read it by getAttribute)

document.body.ABBA = 5 // assign property with another case

// must get a property named 'ABba' in case-insensitive way.

alert( document.body.getAttribute('ABba') ) // 1

优先选择property

在实际应用中,98%的 DOM 操作都是使用 properties。
只有两种情形需要使用attributes

1.自定义 HTML attributes,因为它并不同步到DOM property。
2.访问内置的 HTML attributes,这些 attribute 不能从 property 同步过来。例如 INPUT标签的value值。

Javascript 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
vue组件实例解析
Jan 10 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 #Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 #Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 #Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 #Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 #Javascript
js实现在网页上简单显示时间的方法
Mar 02 #Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
js实现一个简易计算器
2020/03/30 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
通过C++学习Python
2015/01/20 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
pandas取出重复数据的方法
2019/07/04 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
八一建军节活动方案
2014/02/10 职场文书
大专生自荐书范文
2014/06/22 职场文书
植物生产学专业求职信
2014/08/08 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
教师教育教学随笔
2015/08/15 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
python运行脚本文件的三种方法实例
2022/06/25 Python