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


Posted in Javascript onFebruary 07, 2021

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属性选择器的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
jsTree使用记录实例
Dec 01 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 #Javascript
一起深入理解js中的事件对象
Feb 06 #Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
python友情链接检查方法
2015/07/08 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
numpy数组拼接简单示例
2017/12/15 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
DOM和JQuery对象有什么区别
2016/11/11 面试题
清洁工表扬信
2014/01/08 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
信仰观后感
2015/06/03 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Python编解码问题及文本文件处理方法详解
2021/06/20 Python