DOM对象attribute和property的不同
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和自定义propery
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 propery列出所有的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); //trueconsole.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); //helloconsole.log(input.getAttribute('value')); //helloinput.value = 'new';console.log(input.value); //newconsole.log(input.getAttribute('value')); //helloinput.setAttribute('value','other'); //此时再改变value attribute，value property不再变化console.log(input.value); //otherconsole.log(input.getAttribute('value')); //other</script>所以value attribute可以存储输入框的初始值,用于判断输入框值是否被改变
同步的propery和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.
translate for http://javascript.info/tutorial/attributes-and-custom-properties