原生js實現基本選擇器

      在我們剛接觸JavaScript時，在文檔中發現一些常選擇器，如：document.getElementById，document.getElementsByTagName，document.getElementByName，document.getElementsByClassName等等。再實際應用中，我覺得常用的選擇器為id選擇器。類選擇器，標簽選擇器。

      然而當我們接觸到jquery后，習慣用於$('xxxx')選擇器來獲取Dom元素。

　　當我們用原生JavaScript時，會覺得每次用這些選擇器時，都會有一長串代碼。再這里，我自己封裝了一個通用的jquery式的獲取方式在原生JavaScript獲取Dom元素。

　　

  //獲取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的童鞋來說，非常的方便快捷。

 

 

　　這里，我們也可以通過 document.querySelector('#id||.class||tagname'),來獲取dom元素。