ie8及其如下瀏覽器的document.getElementsByClassName兼容性問題

時間 2019-11-08

標籤 ie8 及其如下瀏覽器 document.getelementsbyclassname document getelementsbyclassname 兼容性問題欄目瀏覽器简体版

原文原文鏈接

使用JavaScript訪問DOM的一個重大問題是,此過程須要一種經過元素類名稱來選擇類的類函數,對DOMContentReady,這種類函數的缺失致使開發人員須要本身編寫自定義腳本業執行上述任務,許多這個類腳本都是圍繞着getElementByClassName()創建的,這種解決方法在HTML5中被標準化,另外,這種方法還本地存在於現代瀏覽器中,getElementByClassName()只使用一個字符串值做爲輸入.並返回一個Nodelist,這個NodeList包含全部類名稱匹配這個字符串值的元素:
var el = document.getElementsByClassName('foo');
經過在字符串中使用空格分隔類,也能夠匹配多個類,下面的代碼挑選出了全部既擁有foo類名稱又擁有bar類名稱的元素:
var el = document.getElementsByClassName('foo bar');

Google Chrome、Firefox、Opera、Safari、IE9及更新版本都支持javascript的document.getElementsByClassName函數，而IE6 IE7 IE8不支持document.getElementsByClassName，咱們只能本身給document增長一個自定義函數getElementsByClassName，讓IE 6-8也支持document.getElementsByClassName 如下是IE6 IE7 IE8 document.getElementsByClassName的代碼及實例。

（Xee：由於我要兼容IE8瀏覽器… 這裏有幾個比較高效的方法,它們會先檢測是否支持getElementsByClassName，支持了就使用原生的該方法…）javascript

//-----------------------------✄---通過修正以後的--------------------------------------

//------------------------------✄--使用document.getElementsByClassName()調用----------------------------

if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var children = 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;
};
}

//------------------------------✄--這兩個函數類似---------------------------- //-------------------------✄--使用getElementsByClassName()調用-------------------

 
 function getElementsByClassName(strClass){
    if(document.getElementsByClassName){
        return document.getElementsByClassName(strClass);
    }
    strClass=strClass.replace(/^ +| +$/g,"");
    var aClass=strClass.split(/ +/);
    var eles=document.getElementsByTagName("*");
    for(var i=0;i<aClass.length;i++){
        var a=[]
        var reg=new RegExp("(^| )"+aClass[i]+"( |$)");
        for(var j=0;j<eles.length;j++){
            var ele=eles[j];
            if(reg.test(ele.className)){
                a.push(ele);
            }
        }
        eles=a;
    }
    return eles;
}

下面這個方法也使用了正則進行匹配的..使用document.getElementsByClassName()調用..css

/* 爲IE6 IE7 IE8增長document.getElementsByClassName函數 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
        document.getElementsByClassName=function(cls){
                var els=this.getElementsByTagName('*');
                var ell=els.length;
                var elements=[];
                for(var n=0;n<ell;n++){
                        var oCls=els[n].className||'';
                        if(oCls.indexOf(cls)<0)        continue;
                        oCls=oCls.split(/\s+/);
                        var oCll=oCls.length;
                        for(var j=0;j<oCll;j++){
                                if(cls==oCls[j]){
                                        elements.push(els[n]);
                                        break;
                                }
                        }
                }
                return elements;
        }
}
onload=function(){
        var els=document.getElementsByClassName('xc');
        var l=els.length;
        for(var n=0;n<l;n++){
                alert(els[n].outerHTML);
        }
}

就介紹了這些方法，能夠選用比較短小的使用，注意使用的參數…（Xee:上面的都是一個參數（即要查詢的那個class名）。）html

再附錄實例：//---------------------------------------------------------------------✄------------------------------------------------------------------------java

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>用原生JS獲取CLASS對象</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
 
</head>
<body>
    <div id="w2" class="test">
        <span class="test"></span>
    </div>
    <div id="w1" class="test">
        <div id="ce" class="test">
            <ul>
                <li class="q">qw1</li>
                <li class="q">qw2</li>
                <li class="ww">ww</li>
                <li class="a">a</li>
                <li class="bbb">bbb</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
 if(!document.getElementsByClassName){
document.getElementsByClassName = function(className){
var children = 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;
};
}
 document.getElementsByClassName("ww")[0].style.color='red'; //演示：查找css類名爲"ww"的標籤個數
</script>
</body>
</html>

相關標籤/搜索

document.getelementsbyclassname

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。