原生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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
自己封装的一个原生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实现删除空目录的方法
2015/03/16 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javascript事件模型代码
2007/07/01 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue.js中created方法作用
2018/03/30 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
在python中bool函数的取值方法
2018/11/01 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python Merge函数原理及用法解析
2020/09/16 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
测量实习生自我鉴定
2013/09/19 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
家长会演讲稿范文
2014/01/10 职场文书
高二生物教学反思
2014/01/27 职场文书
九年级化学教学反思
2014/01/28 职场文书
教学实验楼管理制度
2014/02/01 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
小学数学课题方案
2014/06/15 职场文书