js实现类选择器和name属性选择器

jQuery的出现，大大的提高了咱们操做dom的效率，使得咱们的开发更上一层楼，如jQuery的选择器就是一个很强大的功能，它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等，非常方便快捷，而且这些选择器的兼容性都很好，能够说操做dom使用jq选择器一时爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出现大大下降了JQuery的使用频率，并且JQuery在操做dom和绑定数据时确实存在必定的性能问题和各类坑，但依旧不可抹杀jq在操做dom方面的强大存在！

说了JQuery这么多的牛逼之处，那么它的不少内部原理是如何实现的呢？今天就来简单实现一个相似jQuery的类选择器和name属性选择器。

类选择器：

function getElementsByClass(className) {
      var classArr = [];
      var tags = document.getElementsByTagName("*");

      for (var i = 0; i < tags.length; i++) {
        if (tags[i].nodeType == 1) {
          if (tags[i].getAttribute("class") == className) {
            classArr.push(tags[i]);
          }
        }
      }
      return classArr;
}

其实name属性选择器跟类选择器同样，只是判断条件稍微变了一下而已：

function getElementsByName(name) {
      var nameArr = [];
      var num = 0;
      var tags = document.getElementsByTagName("*");

      for (var i = 0; i < tags.length; i++) {
        if (tags[i].nodeType == 1) {
          if (tags[i].getAttribute("name") == name) {
            nameArr.push(tags[i]);
          }
        }
      }

      return nameArr;
}

name属性选择器大多用在表单的操做方面。

以上代码中有一个nodeType的属性，它是用来判断节点的类型，nodeType共有12个值，1表明节点元素，2表明属性，3表明元素或属性中的文本内容。这三个数值用的是比较多的，其余9个用的很少，想了解的话能够去看一下API。在这里，咱们须要获得元素节点，因此就会判断当前元素的nodeType是否为1。

再来贴一下用递归来实现获取元素的全部子节点（含孙子节点）：

/** 
     * 递归获取全部子节点
     * 
      node表明想要获取全部子节点的父节点

      type取值:
      1   Element                 表明元素
      2   Attr                    表明属性
      3   Text                    表明元素或属性中的文本内容
      4   CDATASection            表明文档中的 CDATA 部分（不会由解析器解析的文本）
      5   EntityReference         表明实体引用
      6   Entity                  表明实体
      7   ProcessingInstruction   表明处理指令
      8   Comment                 表明注释
      9   Document                表明整个文档（DOM 树的根节点）
      10  DocumentType            向为文档定义的实体提供接口
      11  DocumentFragment        表明轻量级的 Document 对象，可以容纳文档的某个部分
      12  Notation                表明 DTD 中声明的符号
    */
    var allChildNodes = function (node, type) {
      // 1.建立所有节点的数组
      var allCN = [];

      // 2.递归获取所有节点
      var getAllChildNodes = function (node, type, allCN) {
        // 获取当前元素全部的子节点nodes
        var nodes = node.childNodes;
        // 获取nodes的子节点
        for (var i = 0; i < nodes.length; i++) {
          var child = nodes[i];
          // 判断是否为指定类型节点
          if (child.nodeType == type) {
            allCN.push(child);
          }
          getAllChildNodes(child, type, allCN);
        }
      }
      getAllChildNodes(node, type, allCN);
      // 3.返回所有节点的数组
      return allCN;
    }

    // 调用：
    // 获取body中所有节点
    allChildNodes(document.querySelector('body'), 1);
   
    //获取body中所有纯文本节点
    allChildNodes(document.querySelector('body'), 3)