兼容IE8及其以下的DOM元素方法——低版本浏览器也能用class取DOM

虽然说目前IE9及其以上的就浏览器大部分都支持了两个很爽的dom选择器：querySelector和querySelectorAll，可是总是有些冥顽不灵的项目死活赖在低版本的IE上，这时候你又不得不去兼容它。那么最大的问题就在于，我们很多时候需要根据类名class来取多个DOM对象，那么该怎么办呢？这里给出一个解决方案。

一、解决方案

唯一的办法就是自己去封装一个跨浏览器的DOM元素获取方法，根据querySelector和querySelectorAll实现的功能，反向利用低版本浏览器原生的DOM方法去封装一个函数。

那么该函数至少要实现这些功能：

• 功能1：能返回单一DOM元素（也就是querySelectorAll中的第一个）
  • 根据id属性获取
  • 根据class类名获取
• 功能2：能返回一个包含多个相同类名的DOM元素的集合（类querySelectorAll功能）
  • 只能用class类名作为参数，毕竟id是唯一的

二、实现原理

为了要能够判断输入的参数是id还是class，并且返回单一元素，那么就非常适合用正则来匹配了，并且利用id本身需要“#”号为开头的特点进行区分。（因此该函数使用id为匹配条件时，需要把#号带上）
具体代码如下：

var domUtil = {
    // 获取单一DOM元素
    get: function(query) {
        var _this = this;
        if(!document.querySelector) {
            return document.querySelector(query);
        } else {
            var elements = document;
            var queryStrArray = query.split(/ +/);
            console.log(queryStrArray)
            for(var i = 0; i < queryStrArray.length; i++) {
                var domName = queryStrArray[i];
                elements = _this.getElementsOfParentNode(domName, elements);
            }
            if(elements.length == 1) {
                return elements[0];
            } else {
                return elements;
            }
        }
    },
    // 获取DOM元素集合
    getAll: function (query) {
        if(!document.querySelectorAll) {
            return document.querySelectorAll(query);
        }else{
            var className = query.slice(1)
            var children = document.getElementsByTagName('*');                   //获取html中所有的DOM节点 
      var elements = [];                                                                //用一个空数组存放要获取的class类名
      for (var i = 0; i < children.length; i++) {
          var child = children[i];                                                        
          var classNames = child.className.split(' ');                                    //将所有的class节点保存在一个数组之中
          for (var j = 0; j < classNames.length; j++) {                                 //遍历循环，将满足要求的class存入elements空数组中
              if (classNames[j] == className) {
                  elements.push(child);
                  break;
              }
          }
      }
      return elements;
        }
    },
    // 获取DOM元素
    getElementsOfParentNode: function(domName, parentNode) {
        var _this = this;
        parentNode = parentNode || document;
        domName = domName.trim();
        var regExps = {
            id: /^#/,
            class: /^/
        };
        if(regExps.id.test(domName)) {
            domName = domName.replace(/^\#/g, "");
            return parentNode.getElementById(domName);
        } else if(regExps.class.test(domName)) {
            domName = domName.replace(/^./g, "");
            return _this.getElementsByClassName(domName, parentNode);
        } else {
            return parentNode.getElementsByTagName(domName);
        }
    },
    // 获取class元素的兼容方法
    getElementsByClassName: function(className, parentNode) {
        if(parentNode.getElementsByClassName){
            return parentNode.getElementsByClassName(className);
        } else {
            className = className.replace(/^ +| +$/g,"");
            var classArray = className.split(/ +/);
            var eles = parentNode.getElementsByTagName("*");
            for(var i = 0;i < classArray.length; i++){
                var classEles = [];
                var reg = new RegExp("(^| )" + classArray[i] + "( |$)");
                for(var j = 0;j < eles.length; j++){
                    var ele = eles[j];
                    if(reg.test(ele.className)){
                        classEles.push(ele);
                    }
                }
                eles = classEles;
            }
            return eles;
        }
    }
};

三、使用方法

1. 当需要根据id或class来获取单一DOM元素时，调用domUtil.get(query)方法，qeury参数接收一个id属性如（"#item"）或class类名如（".shop"）;
2. 当需要利用class类名来获取一组DOM元素时，调用domUtil.getAll(query)方法，传入一个class类名作为参数。