javascript getElementsByClassName函數(shù)
2024-05-06 14:10:44
供稿：網(wǎng)友
今天在網(wǎng)上看到的一個(gè)根據(jù)ClassName獲取Elements的腳本，在此記錄一下，以便日后使用。
代碼如下:
var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while (--i >= 0) {
patterns.push(new RegExp("(^|//s)" + classes[i] + "(//s|$)"));
}
var j = elements.length;
while (--j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}
下面是網(wǎng)上其它的一些相關(guān)介紹,大家可以一起參考下。
DOM中的getElementsByClassName解釋如下：DOM API 中提供3種方法取元素(getElementById,getElementsByName,getElementsByTagName)，經(jīng)常編寫CSS的人自然就會(huì)產(chǎn)生疑問，有沒有根據(jù)樣式類名取元素的方法，可惜，DOM1/2 里面都沒有這樣的方法，prototype 很早就擴(kuò)展過DOM的方法，添加了 getElementsByClassName，從方法名上看，似乎非常正統(tǒng)，與前面3種方法名稱也像，分析其代碼，卻發(fā)現(xiàn)還是通過 getElementsByTagName 來實(shí)現(xiàn)。這個(gè)方法稱不上優(yōu)雅，因?yàn)樾枰闅v所有的元素，探測(cè)元素是否包含目標(biāo)樣式類名，返回符合條件的元素?cái)?shù)組。google了一下，卻沒有找到更優(yōu)雅高效的替代方法。
代碼如下:
function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
既然有g(shù)etElementsByClassName，一樣可以有 getElementsByAttribute(如：getElementsByValue、getElementsByStyle、getElementsByType)
代碼如下:
document.getElementsByClassName = function(className,oBox) {
//適用于獲取某個(gè)HTML區(qū)塊內(nèi)部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
document.getElementsByType = function(sTypeValue,oBox) {
//適用于獲取某個(gè)HTML區(qū)塊內(nèi)部同屬于某一特定type的所有HTML元素，如:input,script,link等等
