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)