js实现类选择器和name属性选择器

时间:2019-06-17
本文章向大家介绍js实现类选择器和name属性选择器,主要包括js实现类选择器和name属性选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等,很是方便快捷,并且这些选择器的兼容性都很好,可以说操作dom使用jq选择器一时爽,一直使用一直爽!只是,目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率,而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑,但依旧不可抹杀jq在操作dom方面的强大存在!

说了JQuery这么多的牛逼之处,那么它的很多内部原理是如何实现的呢?今天就来简单实现一个类似jQuery的类选择器和name属性选择器。

类选择器:

function getElementsByClass(className) {
      var classArr = [];
      var tags = document.getElementsByTagName("*");

      for (var i = 0; i < tags.length; i++) {
        if (tags[i].nodeType == 1) {
          if (tags[i].getAttribute("class") == className) {
            classArr.push(tags[i]);
          }
        }
      }
      return classArr;
}

其实name属性选择器跟类选择器一样,只是判断条件稍微变了一下而已:

function getElementsByName(name) {
      var nameArr = [];
      var num = 0;
      var tags = document.getElementsByTagName("*");

      for (var i = 0; i < tags.length; i++) {
        if (tags[i].nodeType == 1) {
          if (tags[i].getAttribute("name") == name) {
            nameArr.push(tags[i]);
          }
        }
      }

      return nameArr;
}

name属性选择器大多用在表单的操作方面。

以上代码中有一个nodeType的属性,它是用来判断节点的类型,nodeType共有12个值,1代表节点元素,2代表属性,3代表元素或属性中的文本内容。这三个数值用的是比较多的,其他9个用的不多,想了解的话可以去看一下API。在这里,我们需要得到元素节点,所以就会判断当前元素的nodeType是否为1。

原文地址:https://www.cnblogs.com/tnnyang/p/11039058.html