前面介绍的获取 CSS 样式的方法，加上节点方法，再加上现在操作 class 的方法，就可以封装成一个简单的 DOM 库。

1. getByClass

思路：

  1. 获取到上下文中的所有元素

  2. 遍历这些元素，是否存在这个 class

  3. 有这个 class 的元素，就保存在一个数组中，最后返回数组

  1. function getByClass(str, context) {
  3. }

2. hasClass

  1. function hasClass(ele, str) {
  2.   //=> 去除首尾空格
  3.   str = str.replace(/^ +| +$/g, '');
  5.   var reg = new RegExp('/'+str+'/');
  6.   return reg.test(ele.className);
  7. }

3. addClass

思路：

  1. 判断是否已经存在这个 class

  2. 存在则直接返回，不存在的话，再添加进去

  3. 实现多个添加，需要把传入的字符串分隔为数组，然后按照上面的判断进行添加

  1. function addClass(ele, str) {
  2.   //=> 去除首尾空格
  3.   str = str.replace(/^ +| +$/g, '');
  4.   //=> 已经拥有，直接 return
  5.   if(hasClass(ele, str)) return;
  7.   var ary = str.split(/ +/g);
  8.   for (var i = 0; i<ary.length; i++) {
  9.     if (!hasClass(ele, ary[i])) {
  10.       ele.className += ary[i];
  11.     }
  12.   }
  13. }

4. removeClass

思路：

  1. 判断是否存在这个 class

  2. 有的话就将其包含左右空格替换为空格，没有的话，就什么都不做

  1. function removeClass(ele, str) {
  2.   str = str.replace(/^ +| +$/g, '');
  4.   var ary = str.aplit(/ +/g);
  5.   for (var i = 0; i < ary.length; i++) {
  6.     var reg = new RegExp('(^| +)' + ary[i] + '( +|$)');
  7.     ele.className = ele.className.replace(reg,' ');
  8.   }
  9. }