getElementsByClassName的低版本瀏覽器相容方法
阿新 • • 發佈:2019-02-20
getElementsByClassName函式實現獲取指定類名的子元素列表,語法如下:
var elements = getElementsByClassName(element, names);
使用示例如下:
如果html元素
對應的DOM節點為example, 那麼
getElementsByClassName(example, “aaa”); 執行結果為包含id為p1, id為p2的元素列表
getElementsByClassName(example, “bbb ccc”);執行結果為包含id為p3的元素列表
getElementsByClassName(example, “ccc bbb”);執行結果為包含id為p3的元素列表
請實現getElementsByClassName方法,要求瀏覽器相容。
function getElementsByClassName(element, names) {
if (element.getElementsByClassName) {
return element.getElementsByClassName(names); //如果瀏覽器支援getElementsByClassName方法,則直接呼叫
}
else {
var children = element.getElementsByTagName('*');
//獲取所有子節點
//新建陣列存放滿足條件的子元素
var child, childname, flag;
names = names.split(' ');
//將names拆分為子元素的類名陣列
for (i in children) {
//對每個子元素進行遍歷
var childname = children[i].className;
//獲取每個子元素的類名
flag = true ;
//標誌設為真
for (j in names) {
if (childname.indexOf(names[j]) == -1)
//對類名進行迴圈 判斷names中所有出現過的類名是否都能在childname中找到
{
flag = false;
break;
//如果有的沒有匹配成功 則該子元素不滿足要求
}
}
if (flag) {
elements.push(children[i]);
//如果子元素滿足要求 ,就把子元素新增到陣列中
}
}
return elements;
}
}