原生js實現基本選擇器

      在咱們剛接觸JavaScript時,在文檔中發現一些常選擇器,如:document.getElementById,document.getElementsByTagName,document.getElementByName,document.getElementsByClassName等等。再實際應用中,我以爲經常使用的選擇器爲id選擇器。類選擇器,標籤選擇器。javascript

      然而當咱們接觸到jquery後,習慣用於$('xxxx')選擇器來獲取Dom元素。java

  當咱們用原生JavaScript時,會以爲每次用這些選擇器時,都會有一長串代碼。再這裏,我本身封裝了一個通用的jquery式的獲取方式在原生JavaScript獲取Dom元素。jquery

  

  //獲取id 傳入 #+id
  //獲取class 傳入 .+class
  //獲取標籤 傳入 標籤名
  function $(obj){
    var which = obj.substr(0, 1);
    var newName =obj.split(which)[1];
    if(which=='#'){
      return document.getElementById(newName);
    }else
    if(which=='.'){
      return document.getElementsByClassName(newName);
    }else{
      return document.getElementsByTagName(obj);
    }
  }

  這裏,咱們發現,這個方法使用和jquery的選擇器區別不大。當咱們要用id選擇器時,只須要調用 $('#id'),就能夠。class時,調用$('.class'),標籤時,調用$('p'),便可。對了習慣了jquery的童鞋來講,很是的方便快捷。dom

 

 

  這裏,咱們也能夠經過 document.querySelector('#id||.class||tagname'),來獲取dom元素。blog

相關文章
相關標籤/搜索