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>
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關文章
javascript中強制執(zhí)行toString()具體實現(xiàn)
Javascript通常會根據方法或運算符的需要而自動把值轉成所需的類型,這可能導致各種錯誤,接下來為大家介紹下javascript如何強制執(zhí)行toString(),感興趣的朋友可以參考下哈2013-04-04
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關資料,文中講解非常細致,幫助大家更好的理解和學習,感興趣的朋友可以了解下2020-07-07
js利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子,有需要的朋友可以參考一下2014-01-01

