纯JS实现根据CSS的class选择DOM

实现根据CSS的class选择DOM，可以使用document.getElementsByClassName()方法来完成。这个方法会返回所有符合指定class name的元素的一个类数组对象。但是需要注意的是，该方法在低版本的IE浏览器中不支持，所以最好搭配使用checkBrowser()函数，来进行浏览器兼容性的处理。

以下是完成该功能的具体步骤：

步骤一：编写checkBrowser函数

function checkBrowser() {
  if (window.document.documentMode) {
    return true;
  } else {
    return false;
  }
}

该函数的作用是检测当前的浏览器环境是否为IE浏览器，若检测到当前浏览器为IE浏览器，则返回true，否则返回false。

步骤二：编写实现根据CSS的class选择DOM的函数

function getElementsByClassName(className) {
  if (checkBrowser()) {
    return document.querySelectorAll("." + className);
  } else {
    var nodeList = document.getElementsByTagName("*");
    var classArray = [];
    for (var i = 0; i < nodeList.length; i++) {
      if ((" " + nodeList[i].className + " ").indexOf(" " + className + " ") > -1) {
        classArray.push(nodeList[i]);
      }
    }
    return classArray;
  }
}

该函数的作用是通过className来选择DOM元素，当浏览器环境为IE时，使用document.querySelectorAll()方法来获取符合指定class name的元素；若非IE浏览器，则使用for循环遍历所有元素，查找符合指定class name的元素并将其存放于数组classArray中返回。

示例一

<!-- HTML -->
<div class="container">
  <p class="red">红色字体</p>
  <p class="blue">蓝色字体</p>
  <p class="red">也是红色字体</p>
  <p class="green">绿色字体</p>
</div>

// JS
var redElements = getElementsByClassName("red");
for (var i = 0; i < redElements.length; i++) {
  redElements[i].style.color = "red";
}

该示例中，我们通过调用getElementsByClassName()函数，获取到了class为red的所有DOM元素，接下来我们使用for循环遍历所有的red元素，并将它们的文本颜色设置为红色。

示例二

<!-- HTML -->
<ul class="menu">
  <li>主页</li>
  <li class="current">新闻</li>
  <li>业界</li>
  <li>娱乐</li>
</ul>

// CSS
.current {
  background-color: #ccc;
}

// JS
var currentElement = getElementsByClassName("current");
for (var i = 0; i < currentElement.length; i++) {
  currentElement[i].style.backgroundColor = "#ccc";
}

该示例中，我们通过调用getElementsByClassName()函数，获取到了class为current的元素，接下来我们通过改变该元素的背景颜色，使得该元素显示为被选中状态，即可以将其应用于导航菜单等场景中。