DOM操作是前端人员最常用的，但是很多的操作方法在不同的浏览器下面却有不同的标准，所以总结了一些公共的兼容方法。注：这里是在window上面增加了一个对象来承载我的方法，如果采用原型的方式，由于ie低版本是和操作系统绑定的所以HTMLElement不存在，所以原型的方法不能兼容。

以下的方法为了展现完整的代码，所以中间不断开加注释，所有的注释在代码里面。

(function(WIN){
    //HTMLElement.prototype
    var DOM = {};

    /**
     * 获取子节点
     *
     * @param ele代表父元素;
     * @param node查找规定的子元素，如果不传入则查找所有的子元素;
     * @return 返回一个数组--里面是一个dom集合
     */
    DOM.getChildren = function(ele,node){
        var domArr = [], //最终符合标准的子元素全部放到这里
            child = ele.childNodes, //所有的子元素（包括text节点，注释节点）
            condition = null;

        //循环元素节点，筛选
        for(var i = 0, len = child.length, item; i < len; i++){
            item = child[i];
            condition = (node && typeof node === 'string') ? (item.nodeType === 1 && item.tagName === node.toUpperCase()) : (item.nodeType === 1);
            if(condition){ //根据条件筛选
                domArr.push(item);
            }
        }

        //返回集合
        return domArr;
    };

    /**
     * 获取下一个兄弟节点（一个节点）
     *
     * @param node当前的html元素
     * @return 返回一个dom元素
     */
    DOM.getNextSibling = function(node){
        //一直向下查找找到元素节点返回
        var node = node.nextSibling;
        if(node.nodeType === 1){ //如果查找到的是元素节点
            return node;
        }
        if(node.nextSibling){ //如果查找到的不是元素节点，并且有下一个兄弟节点
            //递归调用该方法查找
            return arguments.callee(node);
        }
        //如果查找到的既不是元素节点也没有下一个节点了，那么返回null
        return null;
    };

    //另外一种实现的方式(获取下一个兄弟节点)
    DOM.getNextSibling = function(node){
        if(!node){return};
        if(node.nextElementSibling) {
            return node.nextElementSibling;
        }else { //如果不支持的话就用while循环
            var silbings = node.nextSibling;
            while(silbings.nodeType != 1){
                silbings = silbings.nextSibling;
            }
            return silbings;
        }
    };

    /**
     * 查找哥哥节点（集合）
     *
     * @param node当前的html元素
     * @param dom一个数组集合，里面是dom元素的集合
     * @return 返回一个数组
     */
    DOM.getPrevSilbing = function(node, dom){
        var domArr = dom ? dom : [];
        var node = node.previousSibling;
        if(node && node.nodeType === 1){ //如果查找到的是元素节点放入数组
            domArr.push(node);
        }
        if(node && node.previousSibling){ //如果查找到的不是元素节点，并且有下一个兄弟节点
            //递归调用该方法查找
            return arguments.callee(node,domArr);
        }
        //如果查找到的既不是元素节点也没有下一个节点了，那么返回null
        return domArr;
    };

    /**
     * 通过class来查找元素
     *
     * @param name是要查找的class名称
     * @param content是查找范围，默认是document
     * @return 返回一个类数组或一个数组，所以取到的不能用item操作
     */
    DOM.getEleByClass = function(name,content){
        name = name.replace(/^ +| +$/g,''); //去掉开头结尾的空格

        if(document.getElementsByClassName){
            return document.getElementsByClassName(name);
        }else {
            var content = content || WIN.document,
                tag = content.getElementsByTagName('*'),
                reg = new RegExp('(^| )'+name+'( |$)'),
                domArr = [];
            for(var i = 0, len = tag.length, curClass, result; i < len; i++){
                curClass = tag[i].className; //当前元素的所有class
                result = reg.test(curClass); //正则匹配是否含有该class
                if(result){ domArr.push(tag[i]);} //如果匹配到该class，把dom结构放进数组里面去
            }
            return domArr; //返回含有该class的所有dom
        }
    };

    /**
     * 通过class来查找元素（但是这个适用于有很多的class限制的时候）
     *
     * @param name是要查找的class名称
     * @param content是查找范围，默认是document
     * @return 返回一个类数组或一个数组，所以取到的不能用item操作
     */
    DOM.byClass = function(name,content){
        content = content || document;
        name = name.replace(/^ +| +$/g,'');
        var tar = content.getElementsByTagName('*');
        var aStr = name.split(/ +/);
        for(var i = 0, len = aStr.length; i < len; i++){
            eles = DOM.getEleByClass(aStr[i],eles); //循环调用byClass方法
        }
        return eles;
    };

    /**
     * 判断是否含有某个class
     *
     * @param ele是dom元素
     * @param name是class名称
     * @return 返回一个布尔值，true或者false
     */
    DOM.hasClass = function(ele,name){
        var reg = new RegExp('(^| )'+name+'( |$)',"g");
        var classname = ele.className;
        return reg.test(classname);
    };

    /**
     * 添加一个class名称
     *
     * @param ele是dom要添加class的dom元素
     * @param name是class名称
     *
     */
    DOM.addClass = function(ele,name){
        if(!DOM.hasClass(ele,name)){ //如果原本没有这个class
            var oldName = ele.className;
            var newName = oldName + ' ' +name;
            ele.className = newName;
        }
    };

    /**
     * 删除class的名称
     *
     * @param ele是dom要添加class的dom元素
     * @param name是class名称
     *
     */
    DOM.removeClass = function(ele,name){
        if(DOM.hasClass(ele,name)){ //如果原本没有这个class
            var oldName = ele.className;
            var reg = new RegExp(' *'+name+' *',"g"); //匹配空格
            ele.className = oldName.replace(reg,'');
        }
    };

    /**
     * 查找元素的css值
     *
     * @param ele代表指定的元素
     * @param style代表要获取的属性
     *
     */
    DOM.getStyle = function(ele,style){
        if(WIN.getComputedStyle) {
            return getComputedStyle(ele,null)[style]; //第二个参数可以是伪类“after”
        }else {
            return ele.currentStyle[style];
        }
    };

    WIN.DOM = DOM;
})(window);

方法写的逻辑比较简单，如果有漏洞，请联系本人修改。qq：185986288