js中的property和attribute
javascript中的property和attribute虽然都被翻译为“属性”，但是他们还是有区别的。
前两天写网页时用到checkbox，就被property和attribute弄晕了好久。后来看了javascript tutorial中的解释就清楚了许多，周末有空，把原文的主要内容翻译一下。
原帖链接在这里：http://javascript.info/tutorial/attributes-and-custom-properties
一个dom节点可能包含有attributes和properties。它们有联系和区别，很多人经常混淆。
Properties
Dom节点是对象，因此可以存储自定义properties和methods。
下面这个例子将一个对象myData赋值为document.body中的一个property
document.body.myData = {
name: 'John'
}
alert(document.body.myData.name) // John
document.body.sayHi = function() {
alert(this.nodeName)
}
document.body.sayHi() // BODY
自定义的properties和methods只在javascript中可见，不影响html。
另外，自定义的properties是可以在for..in中与原生properties一起被遍历的到的。
document.body.custom = 5 var list = []
for(var key in document.body) {
list.push(key)
} alert(list.join('\n'))
总结一下自定义DOM properties：
- 可能是任何类型的的值，Property名称是大小写敏感的；
- 不影响html。
Attributes
DOM节点提供以下几个标准方法来访问HTML的attributes：
elem.hasAttribute(name)- checks if the attribute existselem.getAttribute(name)- gets an attribute valueelem.setAttribute(name, value)- sets an attributeelem.removeAttribute(name)- removes an attribute
与properties对比，attributes有以下不同：
- 只可以是string；
- 名称大小写不敏感，因为HTML的attributes是大小写不敏感的；
- 不在innerHTML中显示（老版本IE除外）；
- 你可以通过使用元素的array-like attributes property来列举所有的attributes。
例如下面的例子，设置了attributes：
<body>
<div about="Elephant" class="smiling"></div> <script>
var div = document.body.children[0]
alert( div.getAttribute('ABOUT') ) // (1) div.setAttribute('Test', 123) // (2)
alert( document.body.innerHTML ) // (3)
</script>
</body>
运行上述代码，要注意到：
getAttribute('ABOUT')使用了大写，但是同样可以访问到小写的about属性；- 可以尝试给attribute赋值一个string或者其它的原生类型，那么就会变成一个string，object类型会被自动转换，但这个转换在IE中存在问题，所以最好只用原生类型；
- 运行完后新的innerHTML会出现新的名为test的attribute
Properties和Attributes的同步
所有类型的DOM节点都有标准Properties。
例如a标签：Interface HTMLAnchorElement
它有href和accessKey等自有的attributes。另外也从HTMLElement中继承了如id等attributes。
标准的DOM properties和attributes是同步的。
id
举个例子，浏览器会自动同步id这个attribute和propertie：
<script>
document.body.setAttribute('id','la-la-la')
alert(document.body.id) // la-la-la
</script>
href
但是，自动同步不代表同步的值是完全一样的。看下面这个例子：
<a href="#"></a>
<script>
var a = document.body.children[0] a.href = '/'
alert( 'attribute:' + a.getAttribute('href') ) // '/'
alert( 'property:' + a.href ) // IE: '/', others: full URL </script>
这是因为根据w3c标准W3C specification，href必须是一个完整的链接。
还有其它的一些attributes是同步但值不统一的，例如input.checked：
<input type="checkbox" checked> <script>
var input = document.body.children[0] alert( input.checked ) // true
alert( input.getAttribute('checked') ) // empty string
</script>
input.checked这个property的值只能是true或者false，但是attribute可以是你想要的任何值。
value
此外，有一些内置的properties是值单向同步的。
举例，input.value可以从其attribute同步过来：
<body>
<input type="text" value="markup">
<script>
var input = document.body.children[0] input.setAttribute('value', 'new') alert( input.value ) // 'new', input.value changed
</script>
</body>
但是，它的attribute却不能由property同步过来：
<body>
<input type="text" value="markup">
<script>
var input = document.body.children[0] input.value = 'new' alert(input.getAttribute('value')) // 'markup', not changed!
</script>
</body>
在value这个property更新之后，其attribute仍然为原本的值，比如一个访客在输入框中输入了一些东西。这个原本的值可以用来检查input框是否有改变，也可以用来重置框内的内容。
class/className
还有一个命名的例外，就是class这个attribute是和className这个property对应的。
因为class是一个javascript保留字，那么class这个attribute对应的property是className。
<body>
<script>
document.body.setAttribute('class', 'big red bloom') alert( document.body.className ) // 'big red bloom'
</script>
</body>
注意，这个例子在IE<9是不成立的，因为它们用一种奇怪的方式来组织attributes和properties。
好的实践是，总是用className这个property来操作class，而不要用attribute。
对于IE，要谨慎对待attributes。换句话说，除非你真的需要用到attributes，否则的话尽量用properties。而真正需要用到attributes的只有以下情况：
- 需要获取自定义的HTML attribute，因为自定义的attributes不和properties同步；
- 需要获取HTML attributes的原始值，就像
<INPUT value="...">。
Attributes作为DOM节点
Attributes也可以通过elem.attributes集合来获取。
在attributes集合中，每个attribute都作为一个特殊的DOM节点a special kind of DOM node，有name，value，和其它properties。
例如：
<span style="color:blue" id="my">text</span> <script>
var span = document.body.children[0]
alert( span.attributes['style'].value ) // "color:blue;"
alert( span.attributes['id'].value ) // "my"
</script>
另外，IE<8以及IE8兼容模式对于style这个attribute的支持非常的奇怪。
Attribute DOM节点不属于文档树的一部分，它们只可以由他们的元素来访问。
总结
attributes和properties都是DOM模型的核心特性。
下表表示了他们的区别和联系：
| Properties | Attributes |
|---|---|
| 任何类型的值 | String |
| 大小写敏感 | 大小写不敏感 |
不在innerHTML中可见 |
在innerHTML中可见 |
| 标准的DOM properties和attributes是同步的，而自定义的不是 | |
| attributes和properties在IE<8以及IE8兼容模式中是混杂的 | |
如果你向要自定义HTML中的attributes，那么请请记住HTML 5中的data-* attributes。可以查看这里Custom data attributes来获取HTML5中这部分内容。
在实际中，98%的情况下用的的是properties。
attributes只应被用于两种情况下：
- 需要获取自定义的HTML attribute，因为自定义的attributes不和properties同步；
- 需要获取内置HTML attributes，它不和properties同步，并且你确切的知道你确实需要用到attributes，例如input中的value
。
js中的property和attribute的更多相关文章
- JavaScript中的property和attribute
property,attribute都作“属性”解,但是attribute更强调区别于其他事物的特质/特性. 而在JavaScript中,property和attribute更是有明显的区别.众所周知 ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...
- js中的attributes和Attribute的用法和区别。
一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属 ...
- js中Attribute和property的区别与联系
相信大多数的初学者对js中的property和attribute的关系很容易搞混, Attribute大多用于DOM的操作中,比如ele.attributes指的是一个元素的特性集合,是一个nodel ...
- JS中property与attribute的区别
property与attirbute都是属性的意思,在JS中很容易混淆,但实际上二者有很大的区别.简单来说, property:是DOM中的属性,是JavaScript中的对像 attribute:是 ...
- DOM中 property 和 attribute 详解
被问到 property 和 attribute 的区别,想来也是要好好看一下. 一.基本概念区别 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计& ...
- DOM 中 Property 和 Attribute 的区别
原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...
- [转]DOM 中 Property 和 Attribute 的区别
angular的文档: https://angular.io/guide/template-syntax#property-binding https://blog.csdn.net/sunq1982 ...
随机推荐
- 【bzo1579】拆点+dijkstra优先队列优化+其他优化
题意: n个点,m条边,问从1走到n的最短路,其中有K次机会可以让一条路的权值变成0.1≤N≤10000;1≤M≤500000;1≤K≤20 题解: 拆点,一个点拆成K个,分别表示到了这个点时还有多少 ...
- 【BZOJ】1477 青蛙的约会
[算法]扩展欧几里德算法(模线性方程) [题解]http://hzwer.com/2121.html 一些问题写在http://www.cnblogs.com/onioncyc/p/6146143.h ...
- el-date-picker 日期格式化 yyyy-MM-dd
<el-date-picker format="yyyy-MM-dd" v-model="dateValue" type="date" ...
- 计算机网络课设之基于UDP协议的简易聊天机器人
前言:2017年6月份计算机网络的课设任务,在同学的帮助和自学下基本搞懂了,基于UDP协议的基本聊天的实现方法.实现起来很简单,原理也很简单,主要是由于老师必须要求使用C语言来写,所以特别麻烦,而且C ...
- 增大dma的分配
前言 项目中需要通过驱动与fpga通讯,获取fpga往内存里写的数据.因为数据量比较大,需要驱动分配600多M的内存给fpga来写数据,且因为是与fpga通讯,需要连续的内存,还得是uncached的 ...
- C语言string转int
再不用atoi函数接口时,将字符串型转换成整型. 例如:将字符串型“158”转换成整型158 int String2Int(char * buff) { ; ; '; index++) { value ...
- debian下没有公钥解决办法
debian下没有公钥解决办法 执行命令:apt-get update 出现如下错误 正在读取软件包列表... 完成 W: 以下 ID 的密钥没有可用的公钥: 8B48AD6246925 ...
- mac系统安装mysql
1.下载 打开官网:https://www.mysql.com 进入DOWNLOADS--->Community--->MySQL Community Server--->DOWNL ...
- mysql设置服务器编码
今天写java程序的时候出现了插入mysql数据中文乱码问题,确定数据库和表的编码都已指定utf-8.百度后得知mysql安装后需设置服务器编码,以下是解决方法(ubuntu; mysql 5.6.2 ...
- Hive分组取第一条记录
需求 交易系统,财务要求维护每个用户首个交易完成的订单数据(首单表,可取每个用户交易完成时间最老的订单数据).举例: 简写版的表结构: 表数据: 则 财务希望汇总记录如下: uid order_id ...