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中Boolean.toSource()方法的使用
Jun 05 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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扩展程序实现守护进程
2015/04/16 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Python属性和内建属性实例解析
2020/01/14 Python
python中pow函数用法及功能说明
2020/12/04 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
大整数数相乘的问题
2012/07/22 面试题
NET程序员上机面试题
2015/05/23 面试题
给男朋友的道歉信
2014/01/12 职场文书
网吧消防安全制度
2014/01/28 职场文书
2014年法务工作总结
2014/12/11 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python