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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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中防止恶意刷新页面的代码小结
2012/10/31 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
社会保险接收函
2014/01/12 职场文书
学习考察心得体会
2014/09/04 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
离职感谢信怎么写
2015/01/22 职场文书
Python类方法总结讲解
2021/07/26 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server