原生JS | 通过类名获取标签

原生JS通过类名获取标签

getElementsByClassName()是原生JavaScript提供的方法，但是并不是所有的浏览器都支持，在ie早期版本的浏览器是不允许通过这个方法获取标签的，因此，需要自定义一个方法，使我们能够在每个浏览器下都能通过类名获取标签。

通过类名获取标签的思路

首先检测浏览器是否支持getElementsByClassName方法；

对于不支持getElementsByClassName方法的浏览器，通过标签名的方式来获取标签，之后，进行标签的筛选，提取出符合“类名”要求的标签。

涉及到的相关知识

· 字符串的split方法；

· 数组的push方法；

· 工厂模式。

JS功能代码

1. 构建函数

使用工厂模式创建函数，用户向“工厂（函数）”中传入类名，使用if语句，判断document是否存在getElementsByClassName方法，如果存在，则直接获取；

如果不存在，则先获取所有标签（使用通配符），之后使用for循环，针对获得的标签一一进行检测，对于符合条件的元素添加到最终结果当中；

最后将结果（result）返回即可。

2. 功能优化 – 缩小选取范围

在此前的代码当中，存在着一个问题：如果通过通配符获取标签，那么所获取的标签数量过于庞大，需要筛选大量的标签，会耗费比较多的时间，此时可以借助第二个参数进行控制，允许用户传入一个参数，用于指定在某个范围下“通过类名查找标签”。

此外，为了让第二个参数可以是缺省的，需要再添加一个if语句，在没有指定第二参数时，在document元素下进行查找。

3. 功能优化 – 解决类名的不足

截止到目前，代码还存在一定的缺憾：对于拥有多个类名的标签，并不能够成功检测。

此时我们需要将每个类名先拆分出来（将组合的类名拆解成几个具体的类名，如class = "con box"是由con和box两个类名组成的，需要将"con box"拆解成"con"和"box"）。

关于完整代码

如需查看完整代码，请前往：http://codepen.io/majiang/pen/WpGxJd（有可能因为网络原因，导致加载速度较慢）。