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

HTML5学堂(码匠):在原生JavaScript当中,存在默认的getElementsByClassName()方法,在不支持该方法的浏览器中,又应该怎么实现“通过类名获取标签”呢?

原生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(有可能因为网络原因,导致加载速度较慢)。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-03-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

Angularjs基础(六)

AngularJS HTML DOM     AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令    ...

21680
来自专栏IMWeb前端团队

移动端minimvvm框架qvm实现

gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考...

226100
来自专栏十月梦想

Vue组件参数校验和props特性

其实我们可以在组件中把这个props换成一个对象,看到上述代码,type可以为一个数组,来判断这个传递的数据的类型,不符合则报错,required表示这个参数必...

23610
来自专栏守望轩

Visual Studio 2008 每日提示(二十二)

#211、在对象浏览器向前和向后导航 原文链接:The Object Browser has a navigate forward and navigate ...

36780
来自专栏每日一篇技术文章

微信小程序_06 将臃肿的单页js文件拆开

小程序中每一个页面对应一个Page()方法,我们需要把变量和组件的各种事件都写在一个对象里,然后把对象作为这个参数传递给Page方法

12120
来自专栏木子昭的博客

css进阶 less的使用

less 官网http://lesscss.org/ ? less.png npm install -g less # 查看版本 lessc -v 编写les...

42460
来自专栏Ryan Miao

js基础-表单验证和提交

基础知识: 原始提交如下: 1 <form action="/login" method="post" id="form1"> 2 <span>用户<...

75450
来自专栏柠檬先生

jquery mobile 移动web(5)

有序列表   <div data-role="content">     <ol data-role="listview" data-theme="...

22150
来自专栏帘卷西风的专栏

linux下shell技巧

    经常看到一些大牛操作linux的时候,双手运指如飞,指令如流水般输出,会不会感到羡慕呢?

11210
来自专栏技术翻译

如何编写自己的jQuery插件?

对于那些不知道的人来说,jQuery是一个JavaScript库,它包含了许多特性,非常小而且速度很快。它还包括一个易于使用的API,在所有浏览器上都是兼容的,...

19210

扫码关注云+社区

领取腾讯云代金券