zoukankan      html  css  js  c++  java
  • 原生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元素。

  • 相关阅读:
    联考20200604 T2 宝石
    联考20200604 T1 旅游
    联考20200603 T2 排列
    [HAOI2017]八纵八横
    联考20200603 T1 解码
    [POI2011]KON-Conspiracy
    CF917D Stranger Trees
    CF1278F Cards
    CF809E Surprise me!
    NOI2016 循环之美
  • 原文地址:https://www.cnblogs.com/d-12315/p/5607073.html
Copyright © 2011-2022 走看看