//判断元素是否有class
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
//元素增加class
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " "+cls;
}
//元素移除class
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
/* className, rootId(限制范围id名), tagName(标签名称)*/
function getElementsByClassName(cls, rid, tag) {
root = rid && document.getElementById(rid) || document;
if (root.getElementsByClassName) {
return root.getElementsByClassName(cls);
}
tag = tag || '*';
var elems = root.getElementsByTagName(tag);
var ret = [];
for (var i = 0, len = elems.length; i < len; i++) {
var elem = elems[i];
if ((' ' + elem.className + ' ').indexOf(' ' + cls + ' ') > -1) {
ret.push(elem);
}
}
return ret;
}

原生javascript操作class-元素查找-元素是否存在-添加class-移除class的更多相关文章

  1. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  2. 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  3. 原生JavaScript技巧大收集100个

    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...

  4. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  5. 100个常用的原生JavaScript函数

    1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) {    var temp;    var icount = 0;    var ...

  6. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  7. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  8. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  9. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

随机推荐

  1. Tornado基本使用

    一.快速上手 #!/usr/bin/env python # -*- coding:utf-8 -*- import tornado.ioloop import tornado.web class M ...

  2. 在Jersey中如何处理泛型集合

    Jersey是一个标准的Restful Web service框架,可以方便的实现Restful的Server端和客户端. 本文主要介绍使用Jersey客户端时如何将Json格式的数组转换成java的 ...

  3. Yii2 验证码

    没有用默认的layout  验证码点击不会改变 下面是静态页面代码 <div class="col-sm-12 login"> <div class=" ...

  4. Java类加载机制深度分析

    转自:http://my.oschina.net/xianggao/blog/70826 参考:http://www.ibm.com/developerworks/cn/java/j-lo-class ...

  5. Splunk < 6.3 版本 SSL 证书过期事宜

    最近Splunk发出邮件提醒客户SSL证书过期事宜. 问题看起来比较严重,因为所有的实例,包括 forwarder\peernode\indexer\master node 等等都受影响,而且Depl ...

  6. mac下教你如何开源项目托管GitHub

    自从google code关闭了下载服务了之后,GitHub作为了目前最好用的免费开源项目托管站点,众多开源项目都托管在github,其中不乏著名的播放器MPC-HC. 这里教大家如何把代码库上传到G ...

  7. SQL Server与Oracle对比学习:表的管理和组织

    http://blog.csdn.net/weiwenhp/article/details/8088979 我们知道数据库,顾名思义.最重要的东东就是管理数据,而数据在系统中主要是保存在表(table ...

  8. android Fragments详解六:处理fragement的生命周期

    把条目添加到动作栏 你的fragment们可以向activity的菜单(按Manu键时出现的东西)添加项,同时也可向动作栏(界面中顶部的那个区域)添加条目,这都需通过实现方法onCreateOptio ...

  9. linux 安装软件的地方

    用下边这个命令:mysqladmin -u root -p variables root是你的数据库帐号回车后会提示你输入密码,输入上边填写的帐号对应的密码 回车后出来一个大表,找到datadir这一 ...

  10. Java基础知识强化之网络编程笔记05:UDP之多线程实现聊天室案例

    1. 通过多线程改进刚才的聊天程序,这样我就可以实现在一个窗口发送和接收数据了 2.  代码示例: (1)SendThread.java,如下: package com.himi.udpDemo2; ...