• 原生JS查找元素


    今天写了一个很简单、很粗暴的通过JS根据类来查找DOM元素。

    为了降低它的粗暴等级(耗费性能)我给了三个等级。

    首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API。

    其次是指定ID

    最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围!

    因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教。。。

    下面贴代码:

     1     function $(d,t){
     2         
     3         var c = null, // className 
     4             e = null, // element
     5             i = null; // id
     6 
     7         function type(p){
     8             /function.(w*)()/.test(p.constructor);
     9             return RegExp.$1.toLowerCase();
    10         }
    11 
    12         if(type(d) == 'string'){ 
    13 
    14             if(/^.[a-z,A-Z,_]w*$/.test(d)){ // 匹配class
    15                 c = d;
    16             }else if(/^#[a-z,A-Z,_]w*$/.test(d)){ // 匹配id
    17                 i = d;
    18             }else if(/^[a-z,A-Z,_]+$/.test(d)){ // 匹配元素
    19                 e = d;
    20             }else{
    21                 return undefined;
    22             }
    23             if(document.querySelectorAll){  
    24 
    25                 if(c || e) return document.querySelectorAll(c || e);
    26                 if(i) return document.querySelectorAll(i)[0];
    27 
    28             }else{
    29                 if(c){
    30                     var all = document.getElementsByTagName(t || '*'),
    31                         cn = c.slice(1,c.length),
    32                         reg = new RegExp('^'+cn+'\b'), // 限定类名的起始,结束只要是相同字符结束即可。
    33                         em = [];
    34                         for(var i=0;i<all.length;i++){
    35                             if(reg.test(all[i].className)){
    36                                 em.push(all[i])
    37                             }
    38                         }
    39                         return em;
    40                 }else if(e){
    41                     return document.getElementsByTagName(e);
    42                 }else if(i){
    43                     return document.getElementById(i);
    44                 }
    45             }
    46             
    47         }else{
    48             return undefined;
    49         }
    50 
    51     }

    调用方式:

    $('selector'[,type])
  • 相关阅读:
    sbt设置
    scala高级内容(二)
    scala高级内容(一) Case Class
    xubuntu手记
    ScalaTour 2.函数
    ScalaTour-1.基础
    springboot对jsp模板引擎的支持
    springboot对Thymeleaf模板引擎的支持
    SpringBoot接收参数的七种方式
    idea快捷代码提示和修改
  • 原文地址:https://www.cnblogs.com/HCJJ/p/4999343.html
Copyright © 2020-2023  润新知