原生JS查找元素的方法(推荐)


Posted in Javascript onNovember 22, 2016

今天写了一个很简单、很粗暴的通过JS根据类来查找DOM元素。

为了降低它的粗暴等级(耗费性能)我给了三个等级。

首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API。

其次是指定ID

最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围!

因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教。。。

下面贴代码:

function $(d,t){
    
    var c = null, // className 
      e = null, // element
      i = null; // id

    function type(p){
      /function.(\w*)\(\)/.test(p.constructor);
      return RegExp.$1.toLowerCase();
    }

    if(type(d) == 'string'){ 

      if(/^\.[a-z,A-Z,_]\w*$/.test(d)){ // 匹配class
        c = d;
      }else if(/^#[a-z,A-Z,_]\w*$/.test(d)){ // 匹配id
        i = d;
      }else if(/^[a-z,A-Z,_]+$/.test(d)){ // 匹配元素
        e = d;
      }else{
        return undefined;
      }
      if(document.querySelectorAll){ 

        if(c || e) return document.querySelectorAll(c || e);
        if(i) return document.querySelectorAll(i)[0];

      }else{
        if(c){
          var all = document.getElementsByTagName(t || '*'),
            cn = c.slice(1,c.length),
            reg = new RegExp('^'+cn+'\\b'), // 限定类名的起始,结束只要是相同字符结束即可。
            em = [];
            for(var i=0;i<all.length;i++){
              if(reg.test(all[i].className)){
                em.push(all[i])
              }
            }
            return em;
        }else if(e){
          return document.getElementsByTagName(e);
        }else if(i){
          return document.getElementById(i);
        }
      }
      
    }else{
      return undefined;
    }

  }

调用方式:

$('selector'[,type])

以上就是小编为大家带来的原生JS查找元素的方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript在XHTML中的用法详解
Apr 11 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
详解JavaScript函数对象
Nov 15 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue路由教程之静态路由
Sep 03 Javascript
小程序实现录音功能
Sep 22 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 #Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php返回json数据函数实例
2014/10/09 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
jquery remove方法应用详解
2012/11/22 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
理解JS事件循环
2016/01/07 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
对pandas处理json数据的方法详解
2019/02/08 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python创建n行m列数组示例
2019/12/02 Python
在python中做正态性检验示例
2019/12/09 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
python中yield的用法详解
2021/01/13 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
生物学学生自我评价
2014/01/17 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server