原生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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
React中的refs的使用教程
Feb 13 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue实现记事本功能
Jun 26 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 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
php的XML文件解释类应用实例
2014/09/22 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python利用IPython提高开发效率
2016/08/10 Python
python生成ppt的方法
2018/06/07 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
自我评价是什么
2014/01/04 职场文书
文明村创建实施方案
2014/03/27 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
班训口号大全
2014/06/18 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
养成教育工作总结
2015/08/13 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python