原生js实现基本选择器

Posted 2020-07-28 呆呆呆呆呆丶

      在我们刚接触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元素。