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

相关文章

来自专栏C/C++基础

getopt()、getopt_long()与getopt_long_only()获取命令行参数

众所周知,C/C++程序的主函数有两个参数。第一个参数是整型,可以获得包括程序名字的参数个数,第二个参数是字符数组指针或字符指针的指针,可以按顺序获得命令行上各...

744
来自专栏liulun

riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则...

1817
来自专栏吴伟祥

javadoc 原

javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类、方法、成员等注释形成一个和源代码配套的API帮助文档。也就是说,只要在编写程序时以一套特定的标...

623
来自专栏python3

python代码风格

上面代码中----表示4个空格,如果用空格键去打,又长又多,很容易出问题,一个小技巧,用Tab代替4个空格,在Pycharm中默认Tab就是4个空格,不用去设置...

663
来自专栏Vamei实验室

快速学习Bash

Shell是Linux下经典的文本互动方式,而Bash是现在最常用的一种Shell。我在这里总结了Bash的要点知识。 Shell综述 Linux图形化桌面算不...

1846
来自专栏我的博客

哈希算法

哈希算法将任意长度的二进制值映射为较短的固定长度的二进制值,这个小的二进制值称为哈希值。哈希值是一段数据唯一且极其紧凑的数值表示形式。 通常用于加密和查找 加密...

3258
来自专栏IT可乐

XML介绍

1、什么是 XML文件?   XML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计...

15910
来自专栏地方网络工作室的专栏

Shell 循环中实现展示进度百分比的脚本方法

Shell 循环中实现展示进度百分比的脚本方法 当我需要处理一个几万行的文件的时候,需要处理的时间是比较长的。我一开始的想法是,没处理一行,就输出一个 # 号。...

1997
来自专栏决胜机器学习

​PHP开发过程的那些坑(五) ——PHP的empty()

PHP开发过程的那些坑(五)——PHP的empty() (原创内容,转载请注明来源,谢谢) 一、遇到的问题 PHP的empty不是一个函数,而是一个语言结构,用...

2656
来自专栏salesforce零基础学习

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribu...

650

扫描关注云+社区