原生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 条评论
登录 后参与评论

相关文章

来自专栏真皮专栏

python基本常识

tuple,str都可以看做是一种list,都可以进行切片操作。 利用切片操作,去掉一个字符串的前后空格。要注意是是前后空格是不止一个的,可能有很多个。

805
来自专栏JackeyGao的博客

关于Python的20个面试题

Python 是一个高级、解释型、交互式和面向对象的脚本语言. Python 语言设计具有高度可读性的, 使用一些常见的英语词组和其他语言常用的标点符号组成的语...

981
来自专栏猿人谷

总结---4

全局变量与全局静态变量的区别: (a)若程序由一个源文件构成时,全局变量与全局静态变量没有区别。  (b)若程序由多个源文件构成时,全局变量与全局静态变量不同:...

1737
来自专栏冰霜之地

深入浅出 FlatBuffers 之 Encode

FlatBuffers 的使用和 Protocol buffers 基本类似。只不过功能比 Protocol buffers 多了一个解析 JSON 的功能。

1242
来自专栏吴裕超

es6 常用总结

在ES6之前,我们都是用var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部)。这就是函数变量提升例如:

674
来自专栏Nian糕的私人厨房

Type Script 的基本概念及常用语法

TypeScript 是一种由微软开发的自由和开源的编程语言,它作为 JavaScript 的一个超集,扩展了JavaScript 的语法,而且本质上向这个语言...

913
来自专栏cnblogs

一段奇葩Javascript代码引发的思考

     今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论。缩减后的...

1918
来自专栏cs

c++那些事儿10.0 STL--Vector

知识点综述: ---- vector:动态数组,是序列式容器。 这里只介绍vector使用,其实现可以参考数据结构,其函数可以查看stl的源码。 优点...

35311
来自专栏MelonTeam专栏

聊聊kotlin中的run, let, with, apply, also ...

导语 kotlin 标准库中, run, let, with, apply, also 实现解读 在看kotlin代码时, 可能会看到let, r...

2167
来自专栏AI研习社

最常见的 35 个 Python 面试题及答案(2018 版)

作为一个 Python 新手,你必须熟悉基础知识。在本文中我们将讨论一些 Python 面试的基础问题和高级问题以及答案,以帮助你完成面试。包括 Python ...

1263

扫码关注云+社区