在上篇据说每个大牛、小牛都应该有自己的库——DOM处理最后剩下attr()和css()方法没有处理，因为这两个方法当时并不自计划中，是写着写着突然想到的，一时间没有特别好的思路，当时已十一点多了，就去睡了。没想到啊没想到接下来的一星期简直是噩梦，每天加班回家都十一点，今天有时间赶紧补上。
property与attribute
之前说了这两个方法是仿照jQuery的，看了一下jQuery的源码，发现从1.6后jQuery多了一个prop()方法，做的功能却和attr()很相似，看了很多资料才明白prop是在解决什么问题。
property和attribute都可以翻译为属性，不过为了区别一般把property翻译为特性，而在JavaScript中，property和attribute的区别不止这么简单。setAttribute是为DOM节点设置/添加属性的标准方法，我们一般会这么用
var e = document.getElementById('ck'); e.setAttribute('title', 'test');
也可以这么用
var e = document.getElementById('ck'); e.title = 'test';
无论怎么设，在读取的时候这么用
alert(e.getAttribute('title'));
alert(e.title);
对attribute设定/读取值使用setAttribute/getAttribute，property使用.操作符，两种用法看似毫无区别，但是我们也经常设置元素的class，想要得到预期结果得这么写
e.setAttribute('class', 'test');
e.className = 'test';
同样都是对class操作，使用attribute的key是class，property却是className，其读取的结果也不一定相同(input 的checkbox)
console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //true
DOM对象大部分的内置property都有对应的名字的attribute（名字也可能不同，比如上面的class），对于自定义的属性双发互不干扰（IE9以下版本还是共享的）
e.setAttribute('customizeProperty', 'attribute');
e.customizeProperty = 'property';
console.log(e.getAttribute('customizeProperty')); //attribute
console.log(e.customizeProperty); //property
看起来似乎很清楚了，看个例子
<input id="ck" type="checkbox" checked="checked" /> <script type="text/javascript"> var e = document.getElementById('ck'); console.log(e.getAttribute('checked')); //checked console.log(e.checked); //true e.checked = false; console.log(e.getAttribute('checked')); //checked console.log(e.checked); //false e.setAttribute('checked', 'checked'); console.log(e.getAttribute('checked')); //checked console.log(e.checked); //false </script>
这是怎么个情况，不是内置属性是共享的吗，怎么互不干扰了？这是因为一些Boolean类型的属性(如checked, selected, disabled等)比较特殊，其attribute只保留初始值(默认值), property才是当前最新的状态值。一个默认勾选的checkbox，当在页面去除勾选的时候，checked这个property已由true变为false，而checked这个attribute仍然保持“checked”这个初始值。
attr()
这都和attr()有神马关系，说上面的原因是既然了解了property和attribute的不同，那么自己的库干脆也像jQuery把property和attribute分开处理。自己写了很多，总是有这样那样的问题，看到了大神John Resig的处理方法后，豁然开朗，这两个方法是可以写成结合体的，无耻的简单改造了一下抄过来，注释写的都这么经典没舍得删
attr: function (elem, name, value) { // Are we setting a value? if (typeof name == 'object') { for (n in name) { attr(elem, n, name[n]); } } else if (value !== undefined) { // Make sure the element has the ability to set an attribute if (typeof elem.setAttribute !== "undefined") { // If the user is setting the value to false if (value === false) { // Completely remove the attribute elem.removeAttribute(name); // Otherwise set the attribute value } else { // If the user is setting the value to true, // Set it equal to the name of the attribute // (handles boolean attributes nicely) elem.setAttribute(name, value === true ? name : value); } // If it doesn't, then we're likely dealing with window or document // (or some other object entirely) } else { elem[name] = value; } // Otherwise we're getting an attribute value // Check to see if the appropriate method exists // Also don't use getAttribute if a boolean property exists } else if (typeof elem.getAttribute !== "undefined" && typeof elem[name] !== "boolean") { return elem.getAttribute(name); // If no getAttribute method is present, or if we // wish to access the boolean property instead of the // attribute, then we fallback to the DOM object property } else { return elem[name]; } }
css()
css()方法就写不了jQuery那么强大了，基本没有做错误处理，所以使用的时候必须保证传入的属性名称和值是正确的，同时只能传入简单的属性名，而不能是-moz-等类似的
css:function(ele,name,value){ if(typeof name=='object'){ for(n in name){ ssLib.css(ele,n,name[n]); } }else if(typeof value!='undefined'){ ele.style[_parseStyleName(name)]=value; }else{ return ele.style[_parseStyleName(name)]; } }
