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。

再来贴一下用递归来实现获取所有元素的节点：

    /** 递归获取子节点       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;     }