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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
简单的js计算器实现
Oct 26 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue引用外部JS的两种种方法
Jan 28 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
解密效果
2006/06/23 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
基于JSON数据格式详解
2017/08/31 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
js实现秒表计时器
2019/12/16 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python中元组的用法整理
2020/06/15 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
python实现ping命令小程序
2020/12/28 Python
英国网上超市:Ocado
2020/03/05 全球购物
检察院起诉书
2015/05/20 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers