兼容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, el