在眾多主流瀏覽器之間,老版本的IE依舊是個“神話”,前端開發(fā)者們無不為之撕心裂肺,高歌吶喊。老版本IE的兼容性問題,一直是開發(fā)者們較為頭疼的問題。
比如通過類名來獲取DOM節(jié)點,通常情況下,原生JS的寫法是
var elements = document.getElementByClassName("className");
但是這種寫法在IE9一下不支持,所以我們可以(必須)通過某種方式來解決這個問題
廢話不多說,直接上代碼
if (!document.getElementsByClassName) { //判斷瀏覽器如果不支持getElementByClassName,就調(diào)用以下方法
document.getElementsByClassName = function (className) {
var elements = []; //創(chuàng)建一個數(shù)組用于保存最終的獲取結(jié)果
var tags = document.body.getElementsByTagName('*'); //獲取body下所有的標簽
for (var i = 0; i < children.length; i++) { //通過for循環(huán)檢測每個標簽的類名屬性className
var tagNames = tags[i].className;
var classNames = tagNames.split(' '); //classNames數(shù)組中保存的是tags[i]這個標簽的類名組成部分
for (var j = 0; j < classNames.length; j++) { //接著遍歷classNames數(shù)組
if (classNames[j] == className) { //檢測classNames中是否有需要的類名部分
elements[elements.length] = tags[i]; //將獲取classNames[j]這個部分類名所需要的標簽存儲到elements數(shù)組
break; //如果找到了需要的類名,后續(xù)的其他部分就不需要查看了
}
}
}
return elements; //返回新的數(shù)組
};
};
var elements = document.getElementByClassName("className"); //現(xiàn)在在主流瀏覽器中,getElementByClassName獲取DOM元素都可以正常使用
如果瀏覽器不支持getElementByClassName的話,我們可以通過創(chuàng)建一個新的數(shù)組,篩選我們需要的className,步驟在代碼中有詳細的解釋,把結(jié)果保存到新創(chuàng)建的數(shù)組中,供我們調(diào)用。算是間接的實現(xiàn)通過類名獲取DOM元素。
