js实现类选择器和name属性选择器的示例步骤

 更新时间:2021年02月07日 08:40:36   作者:豫见陈公子  
这篇文章主要介绍了js实现类选择器和name属性选择器的示例步骤,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下

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属性选择器的资料请关注脚本之家其它相关文章!

相关文章

  • 小程序实现手写板签名

    小程序实现手写板签名

    这篇文章主要为大家详细介绍了小程序实现手写板签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • json格式数据的添加,删除及排序方法

    json格式数据的添加,删除及排序方法

    这篇文章主要介绍了json格式数据的添加,删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加、删除与排序的实现技巧,需要的朋友可以参考下
    2016-01-01
  • 原生javaScript实现图片延时加载的方法

    原生javaScript实现图片延时加载的方法

    这篇文章主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • 通过共享Promise解决前端重复请求的代码示例

    通过共享Promise解决前端重复请求的代码示例

    在处理前端重复请求问题时,通过共享 Promise 实现请求合并和结果复用是常见的高效解决方案,本文给大家介绍了详细实现思路和代码示例,需要的朋友可以参考下
    2025-03-03
  • bootstrap paginator分页前后台用法示例

    bootstrap paginator分页前后台用法示例

    这篇文章主要为大家详细介绍了bootstrap paginator分页前后台用法示例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • uniapp实现app检查更新与升级详解(uni-upgrade-center)

    uniapp实现app检查更新与升级详解(uni-upgrade-center)

    UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS获取当前日期和时间的简单实例

    JS获取当前日期和时间的简单实例

    这篇文章主要介绍了JS获取当前日期和时间的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 获取table中的rowIndex和cellIndex

    获取table中的rowIndex和cellIndex

    获取table中的rowIndex和cellIndex...
    2006-12-12
  • 微信小程序实现购物车功能

    微信小程序实现购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js里面的变量范围分享

    js里面的变量范围分享

    今天写一个滑动自动加载的功能的时候,遇到了切换就发现加载完毕的情况,查看了下发现可能是js的全局变量和局部变量的问题,自己测试了下,果不其然,下面分享下
    2020-07-07

最新评论