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 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
JS实现简单的表格增删
Jan 16 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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 编写的日历
2006/10/09 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python验证码识别实例代码
2018/02/03 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python 拼接文件路径的方法
2018/10/23 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
优秀村官事迹材料
2014/01/10 职场文书
物理教学随笔感言
2014/02/22 职场文书
爱牙日活动总结
2014/08/29 职场文书
导游欢迎词范文
2015/01/23 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
Python道路车道线检测的实现
2021/06/27 Python
5行Python代码实现一键批量扣图
2021/06/29 Python