對於js來說,我想每一個剛接觸它的人都應該會抱怨:為什麼沒有一個通過class來獲取元素的方法。盡管現在高版本的浏覽器已經支持getElementsByClassName()函數,但是對於低版本浏覽器來說,還是無法兼容,在脫離其他庫的時候,還是得自己封裝一個方法。
方法一
function getByClass1(parent, cls){ var res = []; //存放匹配結果的數組 var ele = parent.getElementsByTagName('*'); for(var i = 0; i < ele.length; i++){ if(ele[i].className == cls){ res.push(ele[i]); } } return res; }
當然class裡的值只有一個時,上面的方法沒問題,但當值為多個時,就會出現問題。
<div class="test"></div> <div class="test box"></div> <script> getByClass1(document, 'test'); //只獲取到第一個div </script>
方法二
出現問題的時候,我們會嘗試著改進,對於多類名的情況我們可以用正則去匹配是否包含所要查找的class名,於是就出現了下面這種寫法:
function getByClass2(parent, cls){ var res = []; var reg = new RegExp('\\b' + cls + '\\b', 'i'); //匹配cls是一個獨立的單詞 var ele = parent.getElementsByTagName('*'); for(var i = 0; i < ele.length; i++){ if(reg.test(ele[i].className)){ res.push(ele[i]); } } return res; }
這種方法看似可以,解決了getByClass1()的問題,我也用了好長一段時間,但是還會有一個隱藏的bug。看下面的例子:
<div class="test"></div> <div class="test_box"></div> <div class="test-box"></div> <script> getByClass2(document, 'test'); //結果獲取到了第一個div和第三個div </script>
理論上應該只獲取到第一個,但是卻和我們預期不一樣。這個bug源於下面這段代碼裡的\b
var reg = new RegExp('\\b' + cls + '\\b', 'i');
我們先來看下\b在正則中的表示的意思
\b是正則表達式規定的一個特殊代碼,代表著單詞的開頭或結尾,也就是單詞的分界處。
通俗點說:\b就是匹配一個單詞(從左邊界到右邊界)。
而問題也就出在這裡,\b把除字母、數字、下劃線外的其他字符都當成是邊界,對於上面的例子中第三個class值為test-box,\b匹配時,把連字符(-)當作單詞邊界,所以也匹配了第三個div。
方法三
因此我們還需要對上面方法進行進一步改進,這裡參考了stackoverflow上提到的一種方法:
How to Get Element By Class in JavaScript?
改進後的代碼如下:
function getByClass3(parent, cls){ var res = []; var reg = new RegExp(' ' + cls + ' ', 'i'); //匹配cls時,兩邊需要有空格 var ele = parent.getElementsByTagName('*'); for(var i = 0; i < ele.length; i++){ if(reg.test(' ' + ele[i].className + ' ')){ res.push(ele[i]); } } return res; }
這種方法捨去了用\b而采用空格來匹配邊界,先在獲取到的className值兩邊加上空格,這樣就保證了className裡的每個值兩邊都會有空格,然後再用正則去匹配。
用這種方法暫時還未發現問題,但是使用時,方法中的單引號內的空格一定不能落下。
方法四
function getByClass3(parent, cls){ var res = []; var reg = new RegExp('(^|\\s)' + cls + '($|\\s)', 'i'); var ele = parent.getElementsByTagName('*'); for(var i = 0; i < ele.length; i++){ if(reg.test(ele[i].className)){ res.push(ele[i]); } } return res; }
空格完全用正則來處理,這樣省去了空格容易落下的問題,代碼也更美觀精簡。
那麼這種方法是否就是比較完美的呢,其實不然,下面來看下更優的方案。
方法五(完美版)
文章開頭已經提到,高版本的浏覽器已經支持getElementsByClassName()方法。出於性能考慮,對支持的浏覽器使用原生方法勢必會更好。而對於低版本的浏覽器使用上面的方法四。
function getByClass(parent, cls){ if(parent.getElementsByClassName){ return parent.getElementsByClassName(cls); }else{ var res = []; var reg = new RegExp(' ' + cls + ' ', 'i') var ele = parent.getElementsByTagName('*'); for(var i = 0; i < ele.length; i++){ if(reg.test(' ' + ele[i].className + ' ')){ res.push(ele[i]); } } return res; } }
當然方法五自認為是相對較好的方案,如果有更優秀的方法歡迎留言補充。