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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JSONP原理及简单实现
Jun 08 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
React中的Context应用场景分析
Jun 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
js常见表单应用技巧
2008/01/09 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Ajax基础知识详解
2017/02/17 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
教师实习自我鉴定
2013/12/11 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
广告设计应届生求职信
2014/03/01 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
国庆节标语大全
2014/10/08 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
爱国主义电影观后感
2015/06/18 职场文书
小学美术教学反思
2016/02/17 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL