1. 程式人生 > >getElementsByClassName的低版本瀏覽器相容方法

getElementsByClassName的低版本瀏覽器相容方法

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; } }