javascript中attribute和property的区别详解


Posted in Javascript onJune 05, 2014

DOM元素的attribute和property很容易混?x在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。

attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。

attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

<div class="box" id="box" gameid="880">hello</div>

上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:
[ class="box", id="box", gameid="880" ]

可以这样来访问attribute节点:
var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

但是IE6-7将很多东西都存放在attributes中,上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法:

console.log( elem.getAttribute('gameid') ); // 880

要设置一个attribute节点使用setAttribute方法,要删除就用removeAttribute:

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

attributes是会随着添加或删除attribute节点动态更新的。
property就是一个属性,如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了,和普通的对象没啥分别:

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

之所以attribute和property容易混?x在一起的原因是,很多attribute节点还有一个相对应的property属性,比如上面的div元素的id和class既是attribute,也有对应的property,不管使用哪种方法都可以访问和修改。

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

但是对于自定义的attribute节点,或者自定义property,两者就没有关系了。

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

对于IE6-7来说,没有区分attribute和property:

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估计都很容易掉进这个坑中。
DOM元素一些默认常见的attribute节点都有与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素:

<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

对于这些特殊的attribute节点,只有存在该节点,对应的property的值就为true,如:

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

最后为了更好的区分attribute和property,基本可以总结为attribute节点都是在HTML代码中可见的,而property只是一个普通的名值对属性。

// gameid和id都是attribute节点
// id同时又可以通过property来访问和修改
<div gameid="880" id="box">hello</div> 
// areaid仅仅是property
elem.areaid = 900;
Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
angular之ng-template模板加载
Nov 09 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
详解小程序循环require之坑
Mar 08 Javascript
JS实现小米轮播图
Sep 21 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
pandas修改DataFrame列名的方法
2018/04/08 Python
Python实现的建造者模式示例
2018/08/06 Python
python装饰器的特性原理详解
2019/12/25 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
华润集团网上药店:健一网
2016/09/19 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
班干部竞选演讲稿
2014/04/24 职场文书
《春雨》教学反思
2014/04/24 职场文书
出差报告范文
2014/11/06 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
捐书活动倡议书
2015/04/27 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL