IE不支持getElementsByClassName最終完美解決方案
更新時(shí)間：2012年12月17日 16:21:02 作者：
目前可以這么解決，判斷瀏覽器支不支持這個(gè)方法，如果支持就不管；如果不支持，就在document對(duì)象里加入getElementsByClassName這個(gè)方法,按興趣的朋友可以了解下
目前可以這么解決，判斷瀏覽器支不支持這個(gè)方法，如果支持就不管；如果不支持，就在document對(duì)象里加入getElementsByClassName這個(gè)方法，這樣的寫(xiě)法有一個(gè)好處，即不管有沒(méi)有原生函數(shù)你都不用去修改代碼。
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;
};
}
最終的方案為：
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;
}
}
通常先使用getElementsByTagName("*")取出文檔中所有元素，然后進(jìn)行遍歷，使用正則表達(dá)式找出匹配的元素放入一個(gè)數(shù)組返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防錯(cuò)誤
下面的方法完美支持了document寫(xiě)法
復(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;
}
}
您可能感興趣的文章:
- javascript getElementsByClassName 和js取地址欄參數(shù)
- javascript getElementsByClassName函數(shù)
- javascript getElementsByClassName實(shí)現(xiàn)代碼
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- 關(guān)于IE中g(shù)etElementsByClassName不能用的問(wèn)題解決方法
- IE瀏覽器不支持getElementsByClassName的解決方法
- 推薦一個(gè)封裝好的getElementsByClassName方法
相關(guān)文章
本篇文章對(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 閉包的相關(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ù)組的操作指南的相關(guān)資料,需要的朋友可以參考下2014-12-12
JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)入門(mén)教程,包括對(duì)節(jié)點(diǎn)的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點(diǎn)時(shí)需注意的問(wèn)題,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JavaScript變量的作用域的基本知識(shí),是JavaScript入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-08
下面講述的是自定義trim()函數(shù)遇到的問(wèn)題，改進(jìn)的過(guò)程,建議在支持的瀏覽器中使用原生函數(shù)2013-04-04