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

    再来贴一下用递归来实现获取元素的所有子节点(含孙子节点):

        /** 
         * 递归获取所有子节点
         * 
          node代表想要获取所有子节点的父节点
    
          type取值:
          1   Element                 代表元素
          2   Attr                    代表属性
          3   Text                    代表元素或属性中的文本内容
          4   CDATASection            代表文档中的 CDATA 部分(不会由解析器解析的文本)
          5   EntityReference         代表实体引用
          6   Entity                  代表实体
          7   ProcessingInstruction   代表处理指令
          8   Comment                 代表注释
          9   Document                代表整个文档(DOM 树的根节点)
          10  DocumentType            向为文档定义的实体提供接口
          11  DocumentFragment        代表轻量级的 Document 对象,能够容纳文档的某个部分
          12  Notation                代表 DTD 中声明的符号
        */
        var allChildNodes = function (node, type) {
          // 1.创建全部节点的数组
          var allCN = [];
    
          // 2.递归获取全部节点
          var getAllChildNodes = function (node, type, allCN) {
            // 获取当前元素所有的子节点nodes
            var nodes = node.childNodes;
            // 获取nodes的子节点
            for (var i = 0; i < nodes.length; i++) {
              var child = nodes[i];
              // 判断是否为指定类型节点
              if (child.nodeType == type) {
                allCN.push(child);
              }
              getAllChildNodes(child, type, allCN);
            }
          }
          getAllChildNodes(node, type, allCN);
          // 3.返回全部节点的数组
          return allCN;
        }
    
        // 调用:
        // 获取body中全部节点
        allChildNodes(document.querySelector('body'), 1);
       
        //获取body中全部纯文本节点
        allChildNodes(document.querySelector('body'), 3)
    
  • 相关阅读:
    openwrt 相关文章
    负载均衡相关文章
    Today's Progress
    Rodrigues formula is beautiful, but uneven to sine and cosine. (zz Berkeley's Page)
    Camera Calibration in detail
    Fundamental Matrix in Epipolar
    Camera Calibration's fx and fy do Cares in SLAM
    FilterEngine::apply
    FilterEngine 类解析——OpenCV图像滤波核心引擎(zz)
    gaussBlur
  • 原文地址:https://www.cnblogs.com/tnnyang/p/11039058.html
Copyright © 2011-2022 走看看