getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持
我们知道,原生的方法,是getElementById()和getElementsByTagName(),这两个不会有兼容问题,但是遇到class的问题还是没法解决。所以这里总结两种封装方法,可以用它们来获取指定的class元素。当然,对于现代浏览器开发,还可以使用querySelector()和querySelectorAll(),他们的功能更加强大。
1.数组遍历的方法:
1 function getByClass(sClass,oParent){ 2 3 var parent = oParent || document; 4 var aEles = parent.getElementsByTagName('*'); 5 var arr = []; 6 7 for(var i=0; i<aEles.length; i++){ 8 9 var aClass = aEles[i].className.split(' '); 10 11 for(var j=0; j<aClass.length; j++){ 12 if(aClass[j] == sClass){ 13 14 arr.push(aEles[i]); 15 16 } 17 } 18 } 19 return arr; 20 }
2.正则匹配的方法
1 function getElementsByClassName(oParent, sClass){ 2 var aEle = oParent.getElemnetsByTagName('*'); 3 var result = []; 4 var re = new RegExp('\b' + sClass + '\b', 'i'); 5 6 for(var i=0; i<aEle.length; i++){ 7 if(re.test(aEle[i].className)){ 8 result.push(aEle); 9 } 10 } 11 return result; 12 }
最后,值得一提是,前端页面实现中,性能的影响往往出现在DOM的操作中。此外,还要注意元素的回流和重绘问题。