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 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
python实现杨辉三角思路
2017/07/14 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python获取Linux发行版名称
2019/08/30 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
精彩自我鉴定
2014/01/16 职场文书
中学教师教育感言
2014/02/21 职场文书
行政人事岗位职责
2014/03/17 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
匿名信格式范文
2015/05/27 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书