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

 更新时间:2016年11月22日 10:13:26   投稿:jingxian  
下面小编就为大家带来一篇原生JS查找元素的方法(推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦

今天写了一个很简单、很粗暴的通过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查找元素的方法(推荐)全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流foreach绑定的相关资料,需要的朋友可以参考下
    2016-10-10
  • js实现不重复导入的方法

    js实现不重复导入的方法

    这篇文章主要介绍了js实现不重复导入的方法,实例分析了JavaScript基于文件与字符串判断操作实现JS文件不重复导入的相关技巧,需要的朋友可以参考下
    2016-03-03
  • 一个简单的JS鼠标悬停特效具体方法

    一个简单的JS鼠标悬停特效具体方法

    这个特效最终实现效果就是当鼠标移动到链接上,文字会横向移动一定距离,貌似总有人喜欢这些花花草草。添加此效果方法很简单。
    2013-06-06
  • 如何在CocosCreator中使用JSZip压缩

    如何在CocosCreator中使用JSZip压缩

    这篇文章主要介绍了在CocosCreator中使用JSZip压缩,对JSZip感兴趣的同学,不妨看一下,并且亲自试一试
    2021-04-04
  • 微信小程序开发之自定义tabBar的实现

    微信小程序开发之自定义tabBar的实现

    这篇文章主要介绍了微信小程序开发之自定义tabBar的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • javascript操作ul中li的方法

    javascript操作ul中li的方法

    这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript XML操作 封装类

    JavaScript XML操作 封装类

    最近研究XML 用JavaScript写了一个简单的XML读取的操作类发给大家分享一下 可兼容 IE 火狐 Safari Chrome 6月30日下午 新修改了一下
    2009-07-07
  • sortable中el-table拖拽及点击箭头上下移动row效果

    sortable中el-table拖拽及点击箭头上下移动row效果

    这篇文章主要介绍了sortable中el-table拖拽及点击箭头上下移动row效果,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • javaScript操作字符串的一些常用方法

    javaScript操作字符串的一些常用方法

    本文主要介绍了javaScript操作字符串的一些常用方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JS中检测数据类型的几种方式及优缺点小结

    JS中检测数据类型的几种方式及优缺点小结

    这篇文章主要介绍了JS中检测数据类型的几种方式及优缺点小结,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12

最新评论