原生JS实现类选择器和name属性选择器示例

本文介绍如何使用原生JavaScript模拟jQuery的类选择器和name属性选择器功能。通过遍历文档节点并判断nodeType为1，结合getAttribute方法获取class或name属性，实现元素筛选。同时包含递归获取所有子节点的代码示例，帮助理解DOM节点遍历原理。

jQuery的选择器优势与现状

jQuery的普及显著提升了DOM操作的效率，推动了前端开发的发展。其强大的选择器功能涵盖了类选择器、ID选择器、属性选择器、元素选择器、层级选择器以及内容筛选选择器等，使用便捷且兼容性良好。尽管Vue、React和Angular等现代框架的兴起降低了jQuery的使用频率，且jQuery在处理DOM和数据绑定时存在性能瓶颈及潜在问题，但其在DOM操作领域的强大能力依然不可忽视。

类选择器实现代码

类选择器的实现逻辑如下：

类选择器完整代码


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属性选择器实现代码

name属性选择器的实现方式与类选择器类似，主要区别在于判断条件的不同：

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属性来判断节点类型。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

以上是关于JavaScript实现类选择器和name属性选择器的详细步骤。如需了解更多相关技术内容，请继续关注本站的其他文章。

原生JavaScript实现类选择器与name属性选择器的方法