JS，我想每个人刚刚接触到它应该抱怨为什么没有办法通过课堂上获得的元素。虽然高版本的浏览器都支持getelementsbyclassname（）函数，他们仍然不能在低版本的浏览器兼容。当它们与其他库分离时，仍然需要封装一种方法。

方法1


功能getbyclass1（父母，CLS）{
var；}；数组匹配结果
无功电= parent.getelementsbytagname（*）；
对于（var i = 0；i < ele.length；i++）{
如果（ELE {我}。类名= = CLS）{
Res.push（ELE {我}）；
}
}
返回水库；
}



当然，当类中只有一个值时，上面的方法没有问题，但是当值是多个时，就会出现问题。





getbyclass1（文档，测试'）； / /到达第一div




方法二

当我们有问题时，我们会设法改进它们。对于许多类的名称，我们可以使用正则匹配来匹配我们想要查找的类名。


功能getbyclass2（父母，CLS）{
var；
VaR（REG =新regexp '%s' B + CLS + '%s' B、我）； / /华彩，是一个独立的词
无功电= parent.getelementsbytagname（*）；
对于（var i = 0；i < ele.length；i++）{
如果（reg.test（ELE {我}。className））{
Res.push（ELE {我}）；
}
}
返回水库；
}



这种方法似乎能解决的问题getbyclass1（），我已经用了很长时间，但会有一个隐藏的错误。请看下面的例子：






getbyclass2（文档，测试'）； / /得到结果的第一和第三DIV DIV




从理论上讲，第一个应该只得到，但它与我们预期的不一样。


VaR reg = new RegExp（'%s' B + CLS + '%s' B、我）；



让我们来看一看正则表达式中b的表示的含义。

是正则表达式中指定的一种特殊代码，表示单词的开头或结尾，即单词的边界。

最流行的观点是，B是单词的匹配（从左到右）。

问题还在这里。除了字母、数字和下划线以外，其他字符也作为边界。在上述的例子中，第三类值的试验箱，当 B比赛，连字符作为这个词的边界，所以它也符合第三格。

方法三

所以我们还需要对上述方法做了进一步改进，在提到的一个计算器的方法：

如何按Javaｓｃｒｉｐｔ按类获取元素

改进后的代码如下所示：


Function getByClass3 (parent, CLS) {
var；
VaR reg = new RegExp（+ CLS + '，'我'）； / /华彩，当双方都有一个空间
无功电= parent.getelementsbytagname（*）；
对于（var i = 0；i < ele.length；i++）{
如果（reg.test（'' +元素{我}。类名+））{
Res.push（ELE {我}）；
}
}
返回水库；
}



该方法为 B通过舍入的空间匹配的边界，在第一次双方空间获得className值，从而确保每名值对双方都将有一个空间，然后使用正则匹配。

这种方法暂时还没有找到，但是在使用时，方法中单引号的空间不能下降。

方法四


功能getbyclass3（父母，CLS）{
var；
VaR reg = new RegExp（'（^ | S）+ CLS +（$ | S）、我）；
无功电= parent.getelementsbytagname（*）；
对于（var i = 0；i < ele.length；i++）{
如果（reg.test（ELE {我}。className））{
Res.push（ELE {我}）；
}
}
返回水库；
}



空间完全由规则处理，节省了空间容易落下的问题，代码更加美观流畅。

那么这种方法是否更完美，其实不然，不如下面更好的方案。

方法五（完美版）

它已经在文章的开头，一个高版本的浏览器支持getelementsbyclassname提到（）方法，对性能的考虑，支持的浏览器的本地方法的使用会更好。和浏览器的版本较低，使用上述方法四。


功能getbyclass（父母，CLS）{
如果（母。getelementsbyclassname）{
返回parent.getelementsbyclassname（CLS）；
其他{ }
var；
VaR reg = new RegExp（'' + CLS + '，'我'）
无功电= parent.getelementsbytagname（*）；
对于（var i = 0；i < ele.length；i++）{
如果（reg.test（'' +元素{我}。类名+））{
Res.push（ELE {我}）；
}
}
返回水库；
}
}



当然，方法五认为它是一个相对较好的解决方案，如果有更好的方法来欢迎消息。