快捷導(dǎo)航

js實(shí)現(xiàn)類(lèi)選擇器和name屬性選擇器的示例步驟

更新時(shí)間：2021年02月07日 08:40:36 作者：豫見(jiàn)陳公子

這篇文章主要介紹了js實(shí)現(xiàn)類(lèi)選擇器和name屬性選擇器的示例步驟，幫助大家更好的理解和使用js，感興趣的朋友可以了解下

jQuery的出現(xiàn)，大大的提升了我們操作dom的效率，使得我們的開(kāi)發(fā)更上一層樓，如jQuery的選擇器就是一個(gè)很強(qiáng)大的功能，它包含了類(lèi)選擇器、id選擇器、屬性選擇器、元素選擇器、層級(jí)選擇器、內(nèi)容篩選選擇器等等，很是方便快捷，并且這些選擇器的兼容性都很好，可以說(shuō)操作dom使用jq選擇器一時(shí)爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出現(xiàn)大大降低了JQuery的使用頻率，而且JQuery在操作dom和綁定數(shù)據(jù)時(shí)確實(shí)存在一定的性能問(wèn)題和各種坑，但依舊不可抹殺jq在操作dom方面的強(qiáng)大存在！

說(shuō)了JQuery這么多的牛之處，那么它的很多內(nèi)部原理是如何實(shí)現(xiàn)的呢？今天就來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè)類(lèi)似jQuery的類(lèi)選擇器和name屬性選擇器。

類(lèi)選擇器：

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;
}

其實(shí)name屬性選擇器跟類(lèi)選擇器一樣，只是判斷條件稍微變了一下而已：

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屬性選擇器大多用在表單的操作方面。

以上代碼中有一個(gè)nodeType的屬性，它是用來(lái)判斷節(jié)點(diǎn)的類(lèi)型，nodeType共有12個(gè)值，1代表節(jié)點(diǎn)元素，2代表屬性，3代表元素或?qū)傩灾械奈谋緝?nèi)容。這三個(gè)數(shù)值用的是比較多的，其他9個(gè)用的不多，想了解的話(huà)可以去看一下API。在這里，我們需要得到元素節(jié)點(diǎn)，所以就會(huì)判斷當(dāng)前元素的nodeType是否為1。

再來(lái)貼一下用遞歸來(lái)實(shí)現(xiàn)獲取元素的所有子節(jié)點(diǎn)（含孫子節(jié)點(diǎn)）：

  /** 
   * 遞歸獲取所有子節(jié)點(diǎn)
   * 
   node代表想要獲取所有子節(jié)點(diǎn)的父節(jié)點(diǎn)

   type取值:
   1  Element         代表元素
   2  Attr          代表屬性
   3  Text          代表元素或?qū)傩灾械奈谋緝?nèi)容
   4  CDATASection      代表文檔中的 CDATA 部分（不會(huì)由解析器解析的文本）
   5  EntityReference     代表實(shí)體引用
   6  Entity         代表實(shí)體
   7  ProcessingInstruction  代表處理指令
   8  Comment         代表注釋
   9  Document        代表整個(gè)文檔（DOM 樹(shù)的根節(jié)點(diǎn)）
   10 DocumentType      向?yàn)槲臋n定義的實(shí)體提供接口
   11 DocumentFragment    代表輕量級(jí)的 Document 對(duì)象，能夠容納文檔的某個(gè)部分
   12 Notation        代表 DTD 中聲明的符號(hào)
  */
  var allChildNodes = function (node, type) {
   // 1.創(chuàng)建全部節(jié)點(diǎn)的數(shù)組
   var allCN = [];

   // 2.遞歸獲取全部節(jié)點(diǎn)
   var getAllChildNodes = function (node, type, allCN) {
    // 獲取當(dāng)前元素所有的子節(jié)點(diǎn)nodes
    var nodes = node.childNodes;
    // 獲取nodes的子節(jié)點(diǎn)
    for (var i = 0; i < nodes.length; i++) {
     var child = nodes[i];
     // 判斷是否為指定類(lèi)型節(jié)點(diǎn)
     if (child.nodeType == type) {
      allCN.push(child);
     }
     getAllChildNodes(child, type, allCN);
    }
   }
   getAllChildNodes(node, type, allCN);
   // 3.返回全部節(jié)點(diǎn)的數(shù)組
   return allCN;
  }

  // 調(diào)用：
  // 獲取body中全部節(jié)點(diǎn)
  allChildNodes(document.querySelector('body'), 1);
  
  //獲取body中全部純文本節(jié)點(diǎn)
  allChildNodes(document.querySelector('body'), 3)