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)

作者：小坏

出处：http://tnnyang.cnblogs.com

以上就是js实现类选择器和name属性选择器的示例步骤的详细内容，更多关于js实现类选择器和name属性选择器的资料请关注其它相关文章！

• js实现圆形菜单选择器
• 泛谈JS逻辑判断选择器 || & &
• 了解JavaScript中的选择器
• Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
• vue2.0.js的多级联动选择器实现方法
• 浅谈JS中的常用选择器及属性、方法的调用
• Javascript封装id、class与元素选择器方法示例
• JS仿JQuery选择器功能
• 浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
• js实现精确到秒的日期选择器完整实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！