原生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查找元素的方法(推荐)全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • 最全的Javascript编码规范(推荐)

    最全的Javascript编码规范(推荐)

    本文给大家总结了js编码规范知识,非常实用,在日常程序开发中经常可以用到,大家务必掌握
    2016-06-06
  • 解决layui表格内文本超出隐藏的问题

    解决layui表格内文本超出隐藏的问题

    今天小编就为大家分享一篇解决layui表格内文本超出隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js html5 css俄罗斯方块游戏再现

    js html5 css俄罗斯方块游戏再现

    这篇文章主要为大家详细介绍了js html5 css俄罗斯方块游戏实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript对象的浅拷贝与深拷贝实例分析

    JavaScript对象的浅拷贝与深拷贝实例分析

    这篇文章主要介绍了JavaScript对象的浅拷贝与深拷贝,结合实例形式分析了javascript浅拷贝与深拷贝的原理、实现方法与相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JScript实现地址选择功能

    JScript实现地址选择功能

    这篇文章主要为大家详细介绍了JScript实现地址选择功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 深入理解Webpack 中路径的配置

    深入理解Webpack 中路径的配置

    这篇文章主要给大家介绍了关于Webpack2中路径配置的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • JS原型、原型链深入理解

    JS原型、原型链深入理解

    这篇文章主要针对javascript中的原型、原型链深入理解,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS实现的在线调色板实例(附demo源码下载)

    JS实现的在线调色板实例(附demo源码下载)

    这篇文章主要介绍了JS实现的在线调色板,可实现响应鼠标点击动态改变调色板颜色的功能,涉及JavaScript针对页面元素属性的动态操作与计算技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-03-03
  • javaScript封装的各种写法

    javaScript封装的各种写法

    这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种封装的格式,需要的朋友可以参考下
    2017-08-08
  • 前端页面禁止别人调试的方法

    前端页面禁止别人调试的方法

    这篇文章主要介绍了前端页面禁止别人调试的方法的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论