JS DOM 的 attribute 与 property
前言
前阵子项目中出了点问题，其中就涉及了对 attribute 和 property 异同的理解，正好趁新年伊始再看一下。隐含二者差异的地方我会在着重标识。
- DOM 的 attribute 和 property
- 二者间的同步（sync）机制
- jQuery、kissy 的 attr、prop 使用场景
- 拙计的 ie
DOM 的 attribute 和 property
字面本身就容易让人混淆，翻译都有 属性 的意思。
attribute
这个大家应该最熟悉，对 DOM 属性节点的概念就是它，先复习下下表
| nodeType | 节点类型 |
|---|---|
| 1 | 元素element |
| 2 | 属性attribute |
| 3 | 文本text |
| 8 | 注释comments |
| 9 | 文档document |
attribute 是一个 DOM 节点在文档树上的属性，总是对应一个nodeType为2的属性节点，并有nodeName和nodeValue对应其属性名和属性值（
对于 nodeType 为 1 的 element 节点，都会有一个 attributes 属性，是包含所有属性节点信息的 NamedNodeMap，map 里的属性就是这里所说的 attribute。
attribute 是直接影响文档树的，并与之有着强对应关系，属性值严格等于其在html文档里被写入或通过以下标准方法 set／get 的值（除了某些特殊属性如href、class、checked、value 等，下文会说明）通过标准化方法塞入的属性总会体现在 innerHTML 里。
代码1：
ele.hasAttribute(key) //ie6、7 没有
ele.getAttribute(key)
ele.setAttribute(key, value)
ele.removeAttribute(key) //ie6、7 没有
代码2：
<body class="iambody" bdbd="yeah">
<div aa="aaa" bb="bbb" class="iamclass"></div>
<script>
var div = $('div')[0];
alert( div.getAttribute('Aa') ); // aaa
div.setAttribute('xxx', 123);
alert( document.body.innerHTML ); // <div aa="aaa" bb="bbb" xxx="123" class="iamclass"></div>
console.log(document.body.attributes) //array-like Object
</script>
</body>
注意到 key 不区分大小写（因为 html 属性名不区分大小写），value 总会转成 string 值。
property
每个 DOM 节点在 JS 引擎 里都会映射为一个 JS 对象，储存着很属性比如 id、href、innerHTML、clientWidth 和方法，但只有极少部分属性会被同步到文档树的 attribute 上，比如 id、title 等。
但他们和自定义属性一起存在于这个对象里，可序列化（serializable）可枚举,同时作为js对象成员标准可通过 delete 删除。
document.body.customProp = 123;
var list = [];
for(var key in document.body) {
list.push(key);
}
alert(list.length); // 144
alert(list.join('\n')); // 一大波属性list
delete document.body.customProp;
由于他是更抽象层次的对象属性，所以不直接影响 html 文档，同时因为是严格的 js 对象属性，自然属性名是区分大小写的。
二者间的同步（sync）机制
我想 attribute 和 property 最容易让人困惑就是他们间的同步机制了吧，部分属性在二者中都存在,可通过任一方式读或写，修改了一者，另一者会随之同步，注意这里说的“同步”而不是“复制”，因为……的确不是复制，部分属性值在同步过程中会发生改变，下文会介绍。
对自定义属性，二者是无关系的，attr 只是读写文档树，prop 只是读写 js 对象。
<input id="lol" type="checkbox" customId1="dota2">
console.log( ele.getAttribute('customId1') ); // dota2
console.log( ele.customId1 ); // undefined
elem.customId2 = 'ff7';
console.log( ele.getAttribute('customId2') ) // null
而对标准 html 文档属性，简单的同步情况就是复制了
console.log( ele.getAttribute('id') ); // lol
console.log( ele.id ); // lol
ele.id = 'dota';
console.log( ele.getAttribute('id') ); // dota
复杂一些的是部分属性在同步时发生的变化,就是上文曾说过的，部分属性同步时会发生改变。
注意 ie 不区分二者，表现一致，下面例子是标准浏览器的结果。
各种属性
href
href 属性在 ie8 下和标准浏览器表现一致。
<a id="sa" href="q/w.html">nginx.org</a>.<br/>
<a id="aa" href="/">nginx.org</a>.<br/>
<script>
console.log(document.getElementById('sa').href); // http://itaofe.info/q/w.html
console.log(document.getElementById('sa').getAttribute('href')); // q/w.html
console.log(document.getElementById('aa').href); // http://itaofe.info/
console.log(document.getElementById('aa').getAttribute('href')); // /
</script>
value
property input.value 会一次性从 attribute 同步属性值，反之则不会，见栗子
<body>
<input id="input1" type="text" value="originVal1">
<script>
var input = document.body.getElementById('input1');
input.setAttribute('value', 'newVal1');
alert( input.value ) // 'newVal1',已同步
input.value="newVal2";
alert( input.getAttribute('value') ) // 'newVal1',没有同步
//注意value在attribute同步到property的一次性
input.setAttribute('value', 'newVal3');
alert(input.value) // newVal2 没有同步
</script>
</body>
运行结果如注释，property 的 value 更新时对应的 attribute 保持原样。此时如果通过 setAttribute 修改 value 值，只这也解释了在 chrome 命令控制台的2点现象：
- js 修改 property 来改变 text input 的 value，页面输入框的值变化了，"Elements" 面板 html 结构里的值却没有变化
- 再通过 setAttribute 修改，"Elements" 面板的属性值变了，input.value 却没变。
可以认为作为表单控件，优先使用 property 值，没有则使用 attribute，所以一般操作 value 不会通过 attribute 操作，而是直接操作 property。
value 的这种一次性单向同步机制,本可用作表单校验用户是否有输入，可惜在ie下二者表现一致，好在各大类库已做了兼容性处理。
class
作为 js 的保留字，如果通过 attribute 读写 class 需要使用的 key 是 className，但在 ie<9 下会因为 attribute 和 property 的融合情况而失效，所以我们都通过 property 的 className 读写即可。
当然各大类库也已经帮我们做了这个事情，但知其然知其所以然是很重要的。
checked、readonly、disabled...
在 w3c 标准里还有一类属性，是存在即生效的，而不关心属性值，基本都是应用在表单元素里。
<input id="input2" type="checkbox" checked="blabla">
<script>
var input = document.getElementById('input2');
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // "blabla"
input.setAttribute('checked', false);
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // "false"<br />
</script>
可见将这些属性通过 attribute 设置为 true 或 false 均不影响被表单的识别，只要存在便生效。注意我这里用的是布尔的 true／false，因为上文说了，通过 attribute 设置到文档树上的属性，都会被转为 string 型。
这个栗子更明确的表现了 attribute 反应的是HTML文档里的实实在在可以看见的属性值，property 则是更抽象级、更趋逻辑化。
此时就涉及到各大类库的容错性处理了(当然是传入布尔型的 true／false)，虽然 jQuery，kissy 都有 attr、prop 方法，但在这类属性上，通过 ele.attr('checked', false) 的语法是可以正确使用的，偏离了 w3c 本意，却降低了学习门槛－ －
不过jQuery官方文档也说了，建议通过标准的模式管理这些属性：
the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
jQuery、kissy 的 attr、prop 使用场景
经过以上分析，对类库 attr、prop 的使用原则应该也就明了了，这里再借 jQuery 文档的一段话：
For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
那些不被表征在文档树，或者简单的说，不是 html 结构标准属性的“属性”都应该通过 prop 来管理。
拙计的 ie
首先关于 xxAttribute 的4个方法，在ie<8下只有 getAttribute 和 setAttribute 存在，
并且他们修改的是DOM的 property 而不是 attribute。没有大问题的原因是ie<8下两者被融合了，但有时会造成怪异的结果。
其次在ie<9下，property 和 attribute 会被完全同步，并保留值类型不变。
document.body.setAttribute('ie', 123);
alert( document.body.ie === 123 ); // true in IE<9,注意是强类型等于===
另外一点是在ie<8下，对 property 和 attribute 的读写是相同的，并趋向于 property，比如对 class 的读写，从 property 的角度出发总是没错的。
P.S. 或 Summary 之类的
网上有些文章将二者的区别用可序列化与否来判断，其实这是不严谨的，从上文知道，通过遍历 attributes 属性，也可以将 attribute 们序列化枚举出来。
下表是一些差异对比
| attribute | property |
|---|---|
| 属性名不区分大小写，属性值总是字符串 | 区分大小写，严格的保留原值类型 |
| 直接表现在文档树上(通过innerHTML可看到) | 不表现在文档树上，小部分经过“同步”借attribute影响文档树 |
| 成员须通过DOM属性attributes枚举 | 成员可直接通过遍历js对象形式枚举 |
| 最次被js使用 | js逻辑、表单逻辑优先使用该值 |
| 标准DOM属性会被同步，自定义属性不会 | 标准DOM属性会被同步，自定义属性不会 |
如果需要使用自定义属性，就使用标准HTML5自定义 attribute data-xxx吧（相关标准在这）。
实际情况中很多情景可以用 properties 管理（可能你无意中用 attr() 时方法内部调的是 prop），考虑 iebug 时由甚，只有2种情况是非 attribute 不可:
- 自定义属性，因为他不会被同步到 property 里，
data-xxx的标准也是 attribute 的子类。 - 无法从 property 同步的 HTML 内置属性，而且你清楚的确定你需要 attribute，比如初始化的 input value。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论