JS封装通过className获取元素的函数示例

那么我们来详细讲解一下如何通过JS封装函数来操作DOM元素并获取元素集合。

函数目的

我们希望封装一个函数，用于通过class名称来获取DOM元素，返回一个DOM元素或DOM元素集合.

函数实现

首先，我们需要知道获取DOM元素的方法，通常我们使用document的getElementsByClassName方法，但是这个方法返回的是一个HTMLCollection（一个含有所有类名匹配的元素集合）。我们希望返回一个类似于jQuery返回的element或element-length数组，因此需要对HTMlCollection进行处理。

接下来来看一下基于原生JS的实现：

function getByClass(clsName, parent) {
  parent = parent || document;
  if (parent.getElementsByClassName) {
    return parent.getElementsByClassName(clsName);
  } else {
    var arr = [];
    var reg = new RegExp('(^|\\s)' + clsName + '(\\s|$)');
    var eles = parent.getElementsByTagName('*');
    for (var i = 0, l = eles.length; i < l; i++) {
      if (reg.test(eles[i].className)) {
        arr.push(eles[i]);
      }
    }
    return arr;
  }
}

上面这段代码实现了一个通过className获取元素的函数，其中传入了两个参数：

• clsName: 需要获取元素的className。
• parent: 父元素节点，可以为任意元素，默认是document。

如果传入的父元素节点有原生的getElementsByClassName方法，那么直接调用。否则，通过正则表达式来筛选class匹配的元素节点，采用遍历方式。

函数的调用

接下来，我们来看一下如何调用上述函数。

var boxs = getByClass('box');
console.log(boxs[0].innerHTML);

我们可以看到输出的是所有匹配到的节点集合，通过下标可以获取要访问的特定节点。需要注意的是，返回的是一个对象集合，我们需要对其进行遍历或者访问特定子元素来完成具体操作。

示例一：实现深度优先遍历

我们来看一个示例，来实现如何使用上面封装的方法来实现对DOM树的遍历。

(function () {
  function preOrder(root) {
    var res = [],
      stack = [];
    if (root) {
      stack.push(root);
      while (stack.length) {
        var item = stack.shift();
        res.push(item);
        if (item.children) {
          var children = getByClass(item.children, item);
          for (var i = children.length - 1; i >= 0; i--) {
            stack.unshift(children[i]);
          }
        }
      }
    }
    return res;
  }
  var root = document.getElementById('root');
  var nodes = preOrder(root);
  console.log(nodes);
})();

这里我们使用了上面封装的方法getByClass，将其传入item.children，这样就能够获取到item下的所有子节点元素，并将其放入stack队列中。接下来我们就可以通过遍历的方式来遍历整棵DOM树。

示例二：添加新元素、删除已有元素

接下来我们来看一个示例，通过调用封装好的函数来实现添加元素到指定的元素下面，或者根据类名删除已有的元素。

function addNewElem(parentClsName, tag, html) {
  var parent = getByClass(parentClsName)[0];
  var newElem = document.createElement(tag);
  newElem.innerHTML = html;
  parent.appendChild(newDiv);
}

function removeElemByClass(elemClsName) {
  var eles = getByClass(elemClsName);
   for(var i=0; i<eles.length; i++){
     var parent = eles[i].parentNode;
     parent.removeChild(eles[i]);
   }
}

我们可以看到，addNewElem函数接受三个参数，分别是父元素的类名，需要添加的标签类型和HTML内容。通过调用getByClass函数获取到父元素节点，通过 document.createElement方法来创建新元素，最后调用appendChild方法将其追加至父元素节点。

removeElemByClass函数接受一个参数，即需要删除元素的类名。通过调用getByClass函数获取到所有指定的元素节点，遍历每一个节点判断其父节点，调用removeChild方法从DOM树中删除指定元素。该方法应用广泛，可以根据类名实现快速删除和替换元素。

总体来说，通过JS中的DOM操作，我们可以实现更加自由的前端界面构建和交互。函数的封装可以帮助我们在多个页面中重复利用代码，同时提高整个工程代码的可读性和可维护性。