javascript通过html的class来获取html元素的方法总结

《javascript通过html的class来获取html元素的方法总结》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、JavaScript通过HTML的class来获取HTML元素的方法总结除了getElementsByClassName()函数，我们可以自己动手编写程式来通过class获取元素，接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结，需要的朋友可以参考下对于js来说，我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器己经支持getElementsByClassName()函数，但是对于低版本浏览器来说，还是无法兼容，在脱离其他库的时候，还是得自己封装一个方法。方法一functiongetByClas

2、si(parent,cIs){nbsp;varres=[];nbsp;//存放匹配结果的数组nbsp:varele=parent.getElementsByTagName(’氺’);nbsp;for(vari=0;ilt;ele.length;i++){nbsp;nbsp;if(ele[i].className==cls){nbsp;nbsp;nbsp:res.push(ele[i]);nbsp:nbsp;}nbsp:}nbsp;returnres;当然class里的值只有一个时，上面的方法没问题，但当值为多个时，就会出现问题。It:divclass=〃test〃gt;It;/divgt;I

3、t:divclass=〃testbox〃gt;It:/divgt:lt;scriptgt;nbsp;getByClassl(document，’test’)；nbsp;//只获取到第一个divlt;/scriptgt;方法二出现问题的时候，我们会尝试着改进，对于多类名的情况我们可以用正则去匹配是否包含所要查找的class名于是就出现了下面这种写法：functiongetByClass2(parent,cis){nbsp;varres=[]:nbsp;varreg=newRegExp(’\b’+cls+’\b’，’i’):nbsp;//匹配cis是一个独立的单词nbsp;varele=pa

4、rent.getElementsByTagName(’氺’);nbsp;for(vari=0;ilt:ele.length;i++){nbsp;nbsp;if(reg.test(ele[iLclassName)){nbsp;nbsp;nbsp;res.push(ele[i]);nbsp;nbsp:}nbsp;}nbsp;returnres:这种方法看似可以，解决了getByClasslO的问题，我也用了好长一段时间，但是还会有一个隐藏的bug。看下面的例子：It;divelass=’’test"gt;It;/divgt;It;divclass=〃test_box〃gt;It;/divgt:I

5、t;divclass=’’test-box^gt:It;/divgt:It;scriptgt;nbsp;getByClass2(document,’test’)；nbsp;//结果获取到了第一个div和第三个divIt;/scriptgt;nbsp;理论上应该只获取到第一个，但是却和我们预期不一样。这个bug源于下面这段代码里的匕varreg=newRegExpC\b’+cls+’\b’，’i’)；我们先来看下b在正则中的表示的意思b是正则表达式规定的一个特殊代码，代表着单词的开头或结尾，也就是单词的分界处。通俗点说：b就是匹配一个单词(从左边界到右边界)。而问题也就出在这里，

6、b把除字母、数字、下划线外的其他字符都当成是边界，对于上面的例子中第三个class值为test-box,b匹配时，把连字符(_)当作单词边界，所以也匹配了第三个div。方法三因此我们还需要对上面方法进行进一步改进，这里参考了stackoverflow上提到的一种方法：HowtoGetElementByClassinjavaScript?改进后的代码如下：functiongetByClass3(parent，cis){nbsp;varres=[]:nbsp;varreg=newRegExp(’’+cls+’’，’i’)：nbsp;//匹配cis时，两边需要有空格nbsp;varele=par

7、ent.getElementsByTagName(’氺’)；nbsp;for(vari=0;ilt;ele.length;i++){nbsp;nbsp;if(reg.test(’’+ele[i].className+’’)){nbsp;nbsp;nbsp:res.push(ele[i]);nbsp;nbsp;}nbsp:}nbsp;returnres;这种方法舍去了用b而采用空格来匹配边界，先在获取到的cl