//判断元素是否有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. Spark RDD概念学习系列之rdd持久化、广播、累加器(十八)

    1.rdd持久化 2.广播 3.累加器 1.rdd持久化 通过spark-shell,可以快速的验证我们的想法和操作! 启动hdfs集群 spark@SparkSingleNode:/usr/loca ...

  2. Yii PHP 框架分析 (一)

    Yii PHP 框架分析 (一)作者:wdy http://hi.baidu.com/delphiss/blog/item/f7da86d787adb72506088b4b.html 基于yii1.0 ...

  3. 缺少HTML Doctype造成的样式问题

    很简单的一个登陆界面: 代码: <html> <head> <style type="text/css"> form span { displa ...

  4. Hyperic Agent 安装配置报 - No token file found, waiting for Agent to initialize

    本人经过跟VMWare 支持的多方努力,问题终于得到解决,方案如下: * Stop the agent Windows service. * Make sure all the agent proce ...

  5. 手机变为电脑的摄像头,使像素高清起来-使用DroidCam

    你是不是已经在嫌弃电脑自带的摄像头的渣渣像素呢? 今天给大家安利一个方法:将手机摄像头设置为电脑的摄像头,让像素高清起来,对于搞图像的同志们真是福音啊,尤其是做人脸识别的时候. 方法有很多种,我推荐我 ...

  6. 常用对象API、附加:集合补充

    基本数据类型对象包装类: 为了方便操作基本数据类型值,将其封装成了对象,在对象中定义了属性和行为丰富了该数据的操作. 用于描述该对象的类就称为基本数据类型对象包装类. byte——Byte short ...

  7. phpstorm 解决svn 无法提交的问题

    phpstorm 无法用svn 提交 提示如下错误: 网上找的解决办法 : 由于安装的TortoiseSVN工具,本身是带有command-line功能的(没有安装)如图: 使用Intellij ID ...

  8. JavaScript网站设计实践(七)编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  9. 有用的javascript外部文件或其他外部文件引用

    1.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/ ...

  10. 【转】android蓝牙开发 蓝牙设备的查找和连接

    1.  首先,要操作蓝牙,先要在AndroidManifest.xml里加入权限 // 管理蓝牙设备的权限 <uses-permissionandroid:name="android. ...