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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
js实现时钟定时器
Mar 26 Javascript
vue 调用 RESTful风格接口操作
Aug 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
Python批量修改文件后缀的方法
2014/01/26 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python3实现购物车功能
2018/04/18 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
wxPython的安装与使用教程
2018/08/31 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
工程开工庆典邀请函
2014/02/01 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
超市店庆活动方案
2014/08/31 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
民事上诉状范文
2015/05/22 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
mysql创建存储过程及函数详解
2021/12/04 MySQL
redis 解决库存并发问题实现数量控制
2022/04/08 Redis