因?yàn)閐ocument.getElementByClassName 方法不兼容IE ,所以要封裝一個(gè)其他的方法。
思路:
先獲取所有的tags,然后取出他們的className,然后通過(guò)字符串判斷他們的class是否與目標(biāo)classname一樣窝革,如果一樣,則把他們?nèi)〕鰜?lái)
第二種情況:如果DOM元素的class名有多個(gè)
通過(guò)字符串切割见间,將DOM元素的所有class名放入一個(gè)數(shù)組中遍歷聊闯,如果找到目標(biāo)名稱工猜,則將此元素加入數(shù)組arrClass米诉。
var boxClass = document.getElementsByTagName('*');
var arrClass = [];
for (var i = 0; i < boxClass.length; i++) {
var name = boxClass[i].className;
var nameBox = name.split(' ');
for (var j = 0; j < nameBox.length; j++) {
if (nameBox[j] == 'box1') {
arrClass.push(boxClass[i]);
}
};
};
//測(cè)試
arrClass[0].style.backgroundColor = 'green';*/
封裝此方法:
傳入兩個(gè)參數(shù),obj對(duì)象和要獲取的class名(字符串)
封裝
形參傳入一個(gè)字符串篷帅,通過(guò)此方法史侣,獲取界面中所有含有此類名的DOM元素拴泌。
并返回包含所有類名DOM的數(shù)組
因?yàn)槲覀儽闅v所有的DOM對(duì)象很占內(nèi)存,所以我們可以挑出制定的DOM對(duì)象惊橱,并從中挑出classname蚪腐。
function getClassName(para,obj){
obj = obj||document;
if(obj.getElementsByClassName){
return obj.getElementsByClassName(para);
} else {
var boxClass = obj.getElementsByTagName('*');
var arrClass = [];
for (var i = 0; i < boxClass.length; i++) {
// var name = boxClass[i].className;
var nameBox = boxClass[i].className.split(' ');
for (var j = 0; j < nameBox.length; j++) {
if (nameBox[j] == para) {
arrClass.push(boxClass[i]);
}
};
};
}
return(arrClass); }
測(cè)試
var liBox = document.getElementById('list');
var arr1 = getClassName('inlist',liBox);
for (var i = 0; i < arr1.length; i++) {
arr1[i].style.backgroundColor = '#ccc';
}
封裝獲取Id和Class的方法
function $(para,obj){
if(para.charAt(0) == '#' ){
//通過(guò)截取字符串來(lái)判斷執(zhí)行的是獲取id還是class
var arr = para.split("#");
var idName = arr[1];
return document.getElementById(idName);
} else if(para.charAt(0) == '.') {
var arr1 = para.split(".");
var classming = arr1[1];
obj = obj||document;
if(obj.getElementsByClassName){
return obj.getElementsByClassName(classming);
} else {
var boxClass = obj.getElementsByTagName('*');
var arrClass = [];
for (var i = 0; i < boxClass.length; i++) {
var nameBox = boxClass[i].className.split(' ');
for (var j = 0; j < nameBox.length; j++) {
if (nameBox[j] == classming) {
arrClass.push(boxClass[i]);
}
};
};
}
return(arrClass);
} else {
return false;}