js實(shí)現(xiàn)類(lèi)選擇器和name屬性選擇器的示例步驟
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)
作者:小壞
以上就是js實(shí)現(xiàn)類(lèi)選擇器和name屬性選擇器的示例步驟的詳細(xì)內(nèi)容,更多關(guān)于js實(shí)現(xiàn)類(lèi)選擇器和name屬性選擇器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- js實(shí)現(xiàn)圓形菜單選擇器
- 泛談JS邏輯判斷選擇器 || &&
- 了解JavaScript中的選擇器
- Vue.js中使用iView日期選擇器并設(shè)置開(kāi)始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
- vue2.0.js的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法
- 淺談JS中的常用選擇器及屬性、方法的調(diào)用
- Javascript封裝id、class與元素選擇器方法示例
- JS仿JQuery選擇器功能
- 淺談js中用$(#ID)來(lái)作為選擇器的問(wèn)題(id重復(fù)的時(shí)候)
- js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
相關(guān)文章
基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化
這篇文章主要介紹了基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化,文中給出了詳細(xì)的代碼,它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場(chǎng)景,如設(shè)計(jì)、數(shù)據(jù)分析和教育領(lǐng)域,感興趣的朋友可以參考下2024-06-06javascript SocialHistory 檢查訪(fǎng)問(wèn)者是否訪(fǎng)問(wèn)過(guò)某站點(diǎn)
今天delicious上這個(gè)名為 SocialHistory 的腳本十分引人注目。源代碼可以在這里下載。這段js代碼的功能就是判斷你的用戶(hù)有沒(méi)有訪(fǎng)問(wèn)過(guò)某個(gè)網(wǎng)站。使用方法很簡(jiǎn)單,例如:2008-08-08使用GruntJS鏈接與壓縮多個(gè)JavaScript文件過(guò)程詳解
怎么把多個(gè)JS文件搞成一個(gè)啊,GruntJS – JavaScript多文件編譯,風(fēng)格檢查,鏈接與壓縮神器,使用過(guò)程如下,有需要的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08uniapp?app?人臉識(shí)別的實(shí)現(xiàn)示例
本文主要介紹了uniapp?app?人臉識(shí)別的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05JavaScript中用字面量創(chuàng)建對(duì)象介紹
這篇文章主要介紹了JavaScript中用字面量創(chuàng)建對(duì)象介紹,本文直接給出代碼實(shí)例,并講解了一些技巧,需要的朋友可以參考下2014-12-12利用JavaScript實(shí)現(xiàn)仿京東放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)仿京東放大鏡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03字節(jié)跳動(dòng)面試之如何用JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制
這篇文章主要給大家介紹了關(guān)于字節(jié)跳動(dòng)面試之如何用JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05