關(guān)于IE中g(shù)etElementsByClassName不能用的問(wèn)題解決方法
更新時(shí)間:2013年08月26日 17:44:10 作者:
今天使用getElementsByClassName寫了段小程序,在IE6、8中測(cè)試的時(shí)候就出現(xiàn)問(wèn)題了,瀏覽器報(bào)錯(cuò),經(jīng)搜索找到了一個(gè)比較好的方法,是個(gè)老外寫的一個(gè)方法
今天使用getElementsByClassName寫了段小程序,滿懷欣喜的準(zhǔn)備去測(cè)試,在ff,谷歌等主流瀏覽器上測(cè)試都沒(méi)問(wèn)題,在IE9上也沒(méi)問(wèn)題,在IE6、8中測(cè)試的時(shí)候就出現(xiàn)問(wèn)題了,瀏覽器報(bào)錯(cuò)。糾結(jié)了下代碼,貌似沒(méi)問(wèn)題,果斷找度娘。。。終于發(fā)現(xiàn)問(wèn)題所在,然來(lái)是IE6、8中不支持getElementsByClassName這種方法。隨后在網(wǎng)上搜索解決方法,找到了一個(gè)比較好的方法,是個(gè)老外寫的一個(gè)方法,定睛一看居然是05年的問(wèn)題了。。。先上代碼:
*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
具體怎么使用可以去看他里面的使用方法。
使用這個(gè)方法之后,IE6、8中能顯示了,但是還是有個(gè)隨機(jī)的問(wèn)題,有時(shí)刷新幾次又會(huì)報(bào)錯(cuò),暫時(shí)無(wú)解了。然后我想用jquery能不能解決這個(gè)刷新報(bào)錯(cuò)的問(wèn)題,當(dāng)然用jquery也能替代getElementsByClassName這個(gè)方法,具體怎么用這里就不作介紹了。然而事實(shí)終不能如人愿,刷新還是會(huì)有問(wèn)題,而且報(bào)錯(cuò)是隨機(jī)的,有時(shí)第一次加載過(guò)程中就報(bào)錯(cuò),有時(shí)刷新幾次才報(bào)錯(cuò)。大俠們。求解決。
復(fù)制代碼 代碼如下:
*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
具體怎么使用可以去看他里面的使用方法。
使用這個(gè)方法之后,IE6、8中能顯示了,但是還是有個(gè)隨機(jī)的問(wèn)題,有時(shí)刷新幾次又會(huì)報(bào)錯(cuò),暫時(shí)無(wú)解了。然后我想用jquery能不能解決這個(gè)刷新報(bào)錯(cuò)的問(wèn)題,當(dāng)然用jquery也能替代getElementsByClassName這個(gè)方法,具體怎么用這里就不作介紹了。然而事實(shí)終不能如人愿,刷新還是會(huì)有問(wèn)題,而且報(bào)錯(cuò)是隨機(jī)的,有時(shí)第一次加載過(guò)程中就報(bào)錯(cuò),有時(shí)刷新幾次才報(bào)錯(cuò)。大俠們。求解決。
您可能感興趣的文章:
相關(guān)文章
ajax中g(shù)et和post的說(shuō)明及使用與區(qū)別
對(duì)付亂碼我都是用過(guò)濾器做字符編碼過(guò)濾的,Get方法過(guò)濾器監(jiān)聽不到,所以我一直喜歡使用Post方法,下面對(duì)Ajax Get和Post方法做一對(duì)比,需要了解的朋友可以 參考下2012-12-12JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化(一)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化(一)的相關(guān)資料,需要的朋友可以參考下2016-02-02three.js 利用uv和ThreeBSP制作一個(gè)快遞柜功能
這篇文章主要介紹了three.js 利用uv和ThreeBSP制作一個(gè)快遞柜,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08JavaScript中SetInterval與setTimeout的用法詳解
在寫H5游戲時(shí)經(jīng)常需要使用定時(shí)刷新頁(yè)面實(shí)現(xiàn)動(dòng)畫效果,比較常用即setTimeout()以及setInterval(),但是大家對(duì)SetInterval與setTimeout的用法了解嗎,下面通過(guò)本文給大家詳解js中SetInterval與setTimeout的用法,需要的朋友參考下2015-11-11Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問(wèn)我一個(gè)問(wèn)題:“有一個(gè)JSON對(duì)象,其中有若干個(gè)子對(duì)象,如何遍歷這個(gè)對(duì)象中的子對(duì)象?”2009-07-07document節(jié)點(diǎn)對(duì)象的獲取方式示例介紹
如果要操作一個(gè)元素,首先要獲取到它,下面為大家介紹下document節(jié)點(diǎn)對(duì)象的獲取方式,感興趣的朋友不要錯(cuò)過(guò)2013-12-12js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼,對(duì)于firefox不兼容。2009-12-12通過(guò)babel操作AST精準(zhǔn)插入配置代碼全流程
這篇文章主要為大家介紹了通過(guò)babel操作AST精準(zhǔn)插入配置代碼的全流程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-02-02