关于HTML中，如何根据元素的className获取元素？

最新推荐文章于 2023-01-06 08:30:24 发布

weixin_30852367

最新推荐文章于 2023-01-06 08:30:24 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/zhangxiaohang/p/5523157.html

　　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 }