文档章节

通过Class获取标签,兼容的几种思路

clearloveing502
 clearloveing502
发布于 2016/06/06 11:23
字数 295
阅读 2
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p class=" r aaa">3</p>
    <p>4</p>
    <p class="aaa">5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</body>
</html>

<script>

    // 方案1 :正则
    function getClass(className){
        // 获取所有标签
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的标签
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 创建正则,通过正则的test方法判断当前元素的class中是否存在正则中的内容,返回一个true或者false
            if(new RegExp(className).test(lis[i].className)){
                // 如果有则添加到arr中
                arr.push(lis[i]);
            }
        }
        // 返回过滤后的数组。
        return arr;
    }
    
    // 方案2 :利用字符串的indexOf判断 找不到返回-1
    function getClass1(className){
        // 获取所有元素
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的数组
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 判断所有标签的class有没有我们想要的
            if(lis[i].className.indexOf(className)!=-1){
                // 添加到新数组
                arr.push(lis[i]);
            }
        }
        // 返回
        return arr;
    }

    console.log(getClass('aaa'));
    // [p.r.aaa, p.aaa]
    console.log(getClass1('aaa'));
    // [p.r.aaa, p.aaa]

</script>

© 著作权归作者所有

上一篇: 前端开发流程
下一篇: CSS布局中的问题
clearloveing502
粉丝 0
博文 10
码字总数 4926
作品 0
西安
私信 提问
手把手教你实现一个canvas智绘画板

前言 本文主要介绍: 项目介绍 项目效果展示 一步步实现项目效果 踩坑 一、项目介绍 名称: 智绘画板 技术栈: HTML5,CSS3,JavaScript,移动端 功能描述: 支持PC端和移动端在线绘画功能 ...

xyyojl
03/04
0
0
HTML+JS实现浏览器下载图片

如果使用a标签指向一个图片的话,你会发现点击链接时它会直接在浏览器中打开图片并显示: 但是这样的话,就存在一个问题,如果我想点击a链接直接下载图片到本地,该怎么实现呢? 在查阅资料之...

我啊翔1314
02/15
0
0
1:dubbo集成spring

dubbo 源码地址 查找解析类DubboBeanDefinitionParser dubbo通过spring提供的自定义namespace来解析自己定义的标签,读取META-INF/spring.handlers文件,找到对应的com.alibaba.dubbo.confi...

tara_qri
2016/08/20
25
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

前言 笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序、2 个支付宝小程序。 之所以选用 Taro,解决微信小程...

jsNewbee
02/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
188
4
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
10
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部