原生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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
使用adodb lite解决问题
2006/12/31 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
discuz表情的JS提取方法分析
2017/03/22 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python爬虫实例详解
2018/06/19 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python实现维吉尼亚算法
2019/03/20 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
企业法人授权委托书范本
2014/09/23 职场文书
保证书格式
2015/01/16 职场文书
关于颐和园的导游词
2015/01/30 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android