Javascript封裝id、class與元素選擇器方法示例
更新時間:2017年03月13日 11:03:16 作者:zengzeng91
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法,文中給出了詳細的示例代碼,對大家的理解和學習具有一定的參考價值,需要的朋友們下面來一起看看吧。
由于各個瀏覽器都支持的選擇方法只有如下三種:
1、document.getElementById()
2、document.getElementsByName()
3、document.getElementsByTagName()
所以在封裝選擇器的時候要考慮瀏覽器的兼容性。
示例代碼如下:
<script>//封裝id選擇器 function $(selector){ var c=selector.substring(0,1);//獲取第一個字符 if(c=="#"){ return document.getElementById(selector.substring(1,selector.length));//返回相應的元素 } } //封裝class選擇器 function $(selector){ var className=selector.substring(1);//從索引為1的元素往后取 //判斷瀏覽器是否支持getElementsByClassName if(document.getElementsByClassName){ return document.getElementsByClassName(className) //document.querySelectorAll('.cls')兼容性有問題 }else{ //document.getElementsByTagName('*')+正則表達式 //\s空白字符 ^開始 $結束 var reg=new RegExp('^|\\s'+className+'$|\\s'); var elems=document.getElementsByTagName("*");//獲取頁面中所有元素 var arr=[];//保存獲取到的指定className的元素 for(var i=0;i<elems.length;i++){ if(reg.test(elems[i].className)){//如果和模式匹配上 arr.push(elem[i]); } } return arr; } } //封裝標簽選擇器 function $(element){ return document.getElementsByTagName(element); } </script>
總結
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關文章
JS如何實現(xiàn)基于websocket的多端橋接平臺
我們在調(diào)試過程使用的工具有:modheader,postman等,但這些工具都會存在的問題:缺少客戶端里相應的設備信息;即使將cookie信息復制出來,也是存在過期的問題;多個設備之間切換時不方便;針對這些存在的問題,我基于websocket雙向通信的特點,實現(xiàn)了多端橋接管理平臺2021-05-05