property
DOM对象的property值通过点方式获取
document.body.className //获取body的类名DOM对象是对象，所以它可以像其他JS对象一样存储自定义的property
document.body.myData = {
name : 'John'
}
document.body.sayHi = function(){
alert('hello world');
}
console.log(document.body.myData.name);
console.log(document.body.sayHi());自定义的property和方法只会在JS中显示，不会影响HTML.
使用for...in可以遍历出所有的标准property和自定义property
document.body.custom = 5;
var list = [];
for(var key in document.body){
list.push([key, document.body[key]]);
}
console.log(list);So,自定义的dom property：
- 可以有任意值，property名区分大小写
- 不会影响HTML
attribute
DOM节点提供如下方法来访问html attributes
ele.hasAttribute(name) //>=ie8
ele.getAttribute(name)
ele.setAttribute(name)
ele.removeAttribute(name) //>=ie8Note: IE8以下及ie8兼容模式下，setAttribute修改的是dom property，不是attribute
和property对比，attribute:
- 值只能为字符串
- 名称不区分大小写
- 会在html中呈现
可以用DOM的attributes property列出所有的attribute
<body> <div about="Elephant" class="smiling"></div> <script> var div = document.body.children[0] console.log( div.getAttribute('ABOUT') ) // (1) div.setAttribute('Test', 123) // (2) console.log( document.body.innerHTML ) // (3) </script> </body>
property和attribute的同步
每个dom节点对象都有标准的properties，同步的可能性有三种
标准dom property和attribute值保持一致
document.body.setAttribute('id','pageWrap') console.log(document.body.id) // pageWrap标准dom property的值不一定和attribute完全一致
<a id="test">测试</a> <script> var a = document.getElementById('test'); a.href = '/'; console.log(a.getAttribute('href')); // '/' console.log(a.href); // 完整链接，但ie7及以下'/' (若链接中有中文，ff和chrome下会转义),这是因为w3c规定href property必须为格式良好的链接 </script>还有一些其他的attribute，同步的值却不相同，比如input.checked
<input type='checkbox' id='check' checked='aa'/> <script> var input = document.getElementById('check'); console.log(input.checked); //true console.log(input.getAttribute('checked')) //'aa' </script>
input.checked的property值只可能为true或false，但attribute值是获取你填入的任意值
- 有些内置property是单向同步的
比如，input.value同步value attribute值，但value attribute值不同步value property值.
并且，input框内用户改变输入值后，value property值会随着变化，value attribute值不变.
<input type="text" id="text"/>
<script>
var input = document.getElementById('text');
input.setAttribute('value','hello');
console.log(input.value); //hello
console.log(input.getAttribute('value')); //hello
input.value = 'new';
console.log(input.value); //new
console.log(input.getAttribute('value')); //hello
input.setAttribute('value','other'); //此时再改变value attribute，value property不再变化
console.log(input.value); //other
console.log(input.getAttribute('value')); //other
</script>所以value attribute可以存储输入框的初始值,用于判断输入框值是否被改变
- 同步的property和attribute名称不一致
class/className
因为JS中class是保留字，所以对于class attribute，用className property来代替class property。
document.body.setAttribute('class', 'big red bloom');
console.log(document.body.className); //big red bloom, 但ie8及以下输出为空除了<ie9,其他浏览器都会随着class attribute的变化，而修改类名。为了保证兼容性，不要用class attribute,用className property.
Summary
attribute和property都是dom模型的重要特征.
在实际应用中，98%场景使用property，只有在如下两个场景使用attribute：
- 自定义的html attribute，因为使用property时不会同步到HTML.
- 需要获取内置html attribute，并且不和property同步的，并且你确定你需要这个attribute. eg.input的value attribute.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。