前端|兼容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是唯一的

二、实现原理 【前端|兼容IE8及其以下的DOM元素方法——低版本浏览器也能用class取DOM】为了要能够判断输入的参数是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; } } };

三、使用方法

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