据说每个大牛、小牛都应该有自己的库——DOM处理续

在上篇据说每个大牛、小牛都应该有自己的库——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)];
                    }
                }

 

参考

http://ejohn.org/blog/jquery-16-and-attr/（大神John Resig的博客）