jQuery的出現，大大的提升了我們操作dom的效率，使得我們的開發更上一層樓，如jQuery的選擇器就是一個很強大的功能，它包含了類選擇器、id選擇器、屬性選擇器、元素選擇器、層級選擇器、內容篩選選擇器等等，很是方便快捷，并且這些選擇器的兼容性都很好，可以說操作dom使用jq選擇器一時爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出現大大降低了JQuery的使用頻率，而且JQuery在操作dom和綁定數據時確實存在一定的性能問題和各種坑，但依舊不可抹殺jq在操作dom方面的強大存在！
說了JQuery這么多的牛逼之處，那么它的很多內部原理是如何實現的呢？今天就來簡單實現一個類似jQuery的類選擇器和name屬性選擇器。
類選擇器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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屬性選擇器跟類選擇器一樣，只是判斷條件稍微變了一下而已：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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。
再來貼一下用遞歸來實現獲取元素的所有子節點（含孫子節點）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
/** * 遞歸獲取所有子節點 * 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) |
作者：小壞
出處：http://tnnyang.cnblogs.com
以上就是js實現類選擇器和name屬性選擇器的示例步驟的詳細內容，更多關于js實現類選擇器和name屬性選擇器的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/tnnyang/p/11039058.html
