js中getByClass 函式進化史

對於js來說，我想每乙個剛接觸它的人都應該會抱怨：為什麼沒有乙個通過class來獲取元素的方法。儘管現在高版本的瀏覽器已經支援getelementsbyclassname()方法，但是對於低版本瀏覽器來說，還是無法相容，在脫離其他庫的時候，還是得自己封裝乙個方法。

下面列舉幾種網上常見的方法並說明存在的一些問題。

function

getbyclass(oparent, sclass)
}return
ares;
}

當class裡的值只有乙個時，上面的方法沒問題，但當值為多個時，就會出現問題。

<

div 
class
="test"
>
div>
<
div 
class
="test box"
>
div>
<
script
>
getbyclass(document, 
'test
'); 
//只獲取到第乙個div
script
>

對於多類名的情況我們可以用正則去匹配是否包含所要查詢的class名，於是就出現了下面這種寫法：

function

getbyclass(oparent, sclass)
}return
ares;
}

這種方法解決了方法一的問題，但是還會有乙個隱藏的bug：

<

div 
class
="test"
>
div>
<
div 
class
="test_box"
>
div>
<
div 
class
="test-box"
>
div>
<
script
>
getbyclass(document, 
'test
'); 
//結果獲取到了第乙個div和第三個div
script
>

理論上應該只獲取到第乙個，但是卻和我們預期不一樣。這個bug源於下面這段**裡的\b

var re = new regexp('\\b' + sclass + '\\b', 'i');

我們先來看下\b在正則中的表示的意思

\b是正規表示式規定的乙個特殊**，代表著單詞的開頭或結尾，也就是單詞的分界處。

而問題也就出在這裡，\b把除字母、數字、下劃線外的其他字元都當成是邊界，對於上面的例子中第三個class值為test-box，\b匹配時，把連字元(-)當作單詞邊界，所以也匹配了第三個div。

function

getbyclass(oparent, sclass)
}return
ares;
}

這種方法捨去了用\b而採用空格來匹配邊界，先在獲取到的classname值兩邊加上空格，這樣就保證了classname裡的每個值兩邊都會有空格，然後再用正則去匹配。

用這種方法暫時還未發現問題，但是使用時，方法中的單引號內的空格一定不能落下。

根據@冰麟輕武 的提示繼續改進：

function

getbyclass(oparent, sclass)
}return
ares;
}

空格完全用正則來處理，這樣省去了空格容易落下的問題，**也更美觀精簡。

那麼這種方法是否就是比較完美的呢，其實不然，下面來看下更優的方案。

文章開頭已經提到，高版本的瀏覽器已經支援getelementsbyclassname()方法。出於效能考慮，對支援的瀏覽器使用原生方法勢必會更好。而對於低版本的瀏覽器使用上面的方法四。

function

getbyclass(oparent, sclass)
else
}return
ares;
}}

** 

js中的函式

1 js中的string物件 1 內建的 2 屬性 length 3 方法 indexof 查詢子字串 匹配字串 查詢到了，返回 字串 出現的位置 沒有找到 返回 1 charat 返回指定位置的字串 substr 字串的擷取，可加兩個引數，形如 2,2 第二個位置 長度 也可以是乙個引數，則表示從...

JS中的函式

js的函式 1 js函式定義的方式 1 普通方式 語法 function 函式名 引數列表 示例 function method method 2 匿名函式 語法 function 引數列表 示例 var method function method 3 物件函式 語法 new function 引...

js中的函式

函式是一段在一起的 可以做某一件事的程式。也叫做子程式 oop中 方法 函式是實現某乙個功能的方法 function 函式名 形參 函式體 實現功能的具體js 函式名 把建立的函式執行，而且這個函式可以執行很多次在真實專案中，我們一般都會把實現乙個具體功能的 封裝在函式中 1 如果當前這個功能需要在...