js操作Dom的一些方法简化

众所周知JQ的选择符很强大，一些看起来很难实现的功能只要在$符号中传入简单的字符串就可以获取到各种层级关系的DOM，而却不用考虑浏览器的兼容性。但有时候在做小项目的时候并不需要引入JQ，而又不想频繁繁琐地调用原始方法，那么我们可以考虑对它们做一点小小的修改，来帮助你在以后需要用到它们的时候变得方便简单。下面是一些基本方法的封装处理：

1.document.getElmentById();最基本，最常用的方法。

var $ = function (id) {
    return typeof id ==="string"?document.getElementById(id) : id;
}

2.document.getElementsByTagName();

var $$ = function (tagname,oParent) {
    return (oParent||document).getElementsByTagName(tagname)
};

3.document.getElementsByClassName();在IE版本下没有此方法，因此要写浏览器的兼容

var $$$ = function (classname,oParent) {
    var result = [],
        reClass = new RegExp("(\\s|^)" + classname + "($|\\s)"),//空格在前或者在后
        element = $$("*",oParent);
    for(var i =0;i<element.length;i++){
        if(reClass.test(element[i].className)) result.push(element[i]);
    }
    return result;
}

4.通过某个属性查找对象或者对象集合

var findByAttr = function(n, v) {//通过某个属性找到元素
    var all = document.all, len = all.length, result = [];
    for(var i=0; i<len; i++) {
        var at = all[i].getAttribute(n);
        if(!at) continue;
        if( at == v ) result.push(all[i]);
    }
    return result;
}

5.addEventLister()方法，绑定事件的方，IE下无此方法，也需要兼容

var addEvent = function (o, e, f) {//需要绑定的DOM对象，时间名称，回调方法，在webkit下默认捕获事件。
    o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})
}

上面的返回都是包含DOM对象的数组或者单个对象，与JQ不同，我们并没有构造出一个新的对象来，它们可以继续调用原始的api。