IE不支持getElementsByClassName最終完美解決方案

更新時(shí)間：2012年12月17日 16:21:02 作者：

目前可以這么解決，判斷瀏覽器支不支持這個(gè)方法，如果支持就不管；如果不支持，就在document對(duì)象里加入getElementsByClassName這個(gè)方法,按興趣的朋友可以了解下

目前可以這么解決，判斷瀏覽器支不支持這個(gè)方法，如果支持就不管；如果不支持，就在document對(duì)象里加入getElementsByClassName這個(gè)方法，這樣的寫法有一個(gè)好處，即不管有沒(méi)有原生函數(shù)你都不用去修改代碼。

通常先使用getElementsByTagName("*")取出文檔中所有元素，然后進(jìn)行遍歷，使用正則表達(dá)式找出匹配的元素放入一個(gè)數(shù)組返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防錯(cuò)誤

下面的方法完美支持了document寫法

復(fù)制代碼代碼如下:

if(!document.getElementsByClassName){ 
document.getElementsByClassName = function(className, element){ 
var children = (element || document).getElementsByTagName('*'); 
var elements = new Array(); 
for (var i=0; i<children.length; i++){ 
var child = children[i]; 
var classNames = child.className.split(' '); 
for (var j=0; j<classNames.length; j++){ 
if (classNames[j] == className){ 
elements.push(child); 
break; 
} 
} 
} 
return elements; 
}; 
}

最終的方案為：

復(fù)制代碼代碼如下:

var getElementsByClassName = function (searchClass, node,tag) { 
if(document.getElementsByClassName){ 
var nodes = (node || document).getElementsByClassName(searchClass),result = []; 
for(var i=0 ;node = nodes[i++];){ 
if(tag !== "*" && node.tagName === tag.toUpperCase()){ 
result.push(node) 
}else{ 
result.push(node) 
} 
} 
return result 
}else{ 
node = node || document; 
tag = tag || "*"; 
var classes = searchClass.split(" "), 
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 
patterns = [], 
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) result.push(current); 
} 
return result; 
} 
}

您可能感興趣的文章:

相關(guān)文章

基于JavaScript 聲明全局變量的三種方式詳解
本篇文章對(duì)JavaScript中聲明全局變量的三種方式進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
2013-05-05
使用原生JS獲取select元素選中的value和text值
這篇文章介紹了使用原生JS獲取select元素選中的value和text值，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
onmouseover和onmouseout的一些問(wèn)題思考
這兩個(gè)事件的觸發(fā)表現(xiàn)真的就是你想要的嗎？在IE下確實(shí)有你需要的兩個(gè)這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持
2013-08-08
JavaScript字符串對(duì)象replace方法實(shí)例（用于字符串替換或正則替換）
這篇文章主要介紹了JavaScript字符串對(duì)象replace方法實(shí)例,replace方法用于字符串替換,同時(shí)支持正則表達(dá)式替換,需要的朋友可以參考下
2014-10-10
JavaScript 閉包詳細(xì)介紹
這篇文章主要介紹了JavaScript 閉包的相關(guān)資料,需要的朋友可以參考下
2016-09-09
js對(duì)象屬性的攔截與Proxy代理與Reflect映射的用法和區(qū)別講解
reflect和proxy都是JavaScript中用于處理對(duì)象的特殊API,下面這篇文章主要給大家介紹了關(guān)于js對(duì)象屬性的攔截與Proxy代理與Reflect映射的用法和區(qū)別,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
js數(shù)組的操作指南
這篇文章主要介紹了js數(shù)組的操作指南的相關(guān)資料,需要的朋友可以參考下
2014-12-12
JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)入門教程,包括對(duì)節(jié)點(diǎn)的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點(diǎn)時(shí)需注意的問(wèn)題,需要的朋友可以參考下
2016-03-03
JavaScript變量的作用域全解析
這篇文章主要介紹了JavaScript變量的作用域的基本知識(shí),是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-08-08
裁剪字符串trim()自定義改進(jìn)版
下面講述的是自定義trim()函數(shù)遇到的問(wèn)題，改進(jìn)的過(guò)程,建議在支持的瀏覽器中使用原生函數(shù)
2013-04-04