Heim > Web-Frontend > js-Tutorial > Detaillierte Einführung in die gemeinsame Nutzung von Javascript-Kapselungs-IDs, Klassen- und Elementselektor-Beispielcodes

Detaillierte Einführung in die gemeinsame Nutzung von Javascript-Kapselungs-IDs, Klassen- und Elementselektor-Beispielcodes

黄舟
Freigeben: 2017-03-20 15:01:45
Original
1721 Leute haben es durchsucht

这篇文章主要给大家介绍了Javascript封装id、class与元素选择器的方法,文中给出了详细的示例代码,对大家的理解和学习具有一定的参考价值,需要的朋友们下面来一起看看吧。

由于各个浏览器都支持的选择方法只有如下三种:

     1、document.getElementById()

     2、document.getElementsByName()

     3、document.getElementsByTagName()

所以在封装选择器的时候要考虑浏览器的兼容性。

示例代码如下:

<script>//封装id选择器
  function $(selector){
    var c=selector.substring(0,1);//获取第一个字符
    if(c=="#"){
      return document.getElementById(selector.substring(1,selector.length));//返回相应的元素
    }
  }
  
  
  //封装class选择器
  function $(selector){
    var className=selector.substring(1);//从索引为1的元素往后取
    //判断浏览器是否支持getElementsByClassName
    if(document.getElementsByClassName){
      return document.getElementsByClassName(className)
      //document.querySelectorAll(&#39;.cls&#39;)兼容性有问题
    }else{
      //document.getElementsByTagName(&#39;*&#39;)+正则表达式
      //\s空白字符 ^开始 $结束
      var reg=new RegExp(&#39;^|\\s&#39;+className+&#39;$|\\s&#39;);
      var elems=document.getElementsByTagName("*");//获取页面中所有元素
      var arr=[];//保存获取到的指定className的元素
      for(var i=0;i<elems.length;i++){
        if(reg.test(elems[i].className)){//如果和模式匹配上
          arr.push(elem[i]);
        }
      }
      return arr;
    }
  }
  
  //封装标签选择器  
  function $(element){
    return document.getElementsByTagName(element);
  }
 </script>
Nach dem Login kopieren

总结

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die gemeinsame Nutzung von Javascript-Kapselungs-IDs, Klassen- und Elementselektor-Beispielcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage