<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul id="ul">
    <li class="red">0000000</li>
    <li class="green">11111<a href="#" class="reds red  ">11</a>11</li>
    <li class="   red ss">2222222222</li>
    <li class="   022 sda   ">3333333<b class="red">333</b>33</li>
</ul>
</body>
</html>
<script type="text/javascript">
var wzw={
    //清楚字符串里面的开始和结束的空格还有合并中间的多个空格为一个空格
    trim:function(str){
        var reg=/\s+/g;
        var a=/^\s/;
        var b=/\s$/;
        return str.replace(b,"").replace(a,"").replace(reg," ");
        },
    //获取制定的class    元素
    getByClass:function (id,oClass){
        var re=[];
        if(document.getElementsByClassName){
            re=id.getElementsByClassName(oClass);
        }else{
        
    var aChild=id.getElementsByTagName("*");
    var reg=new RegExp("\\b" + oClass + "\\b");
    for(var i=0;i<aChild.length;i++){
        if(aChild[i].nodeType=="1"){
            var aClassCllect=aChild[i].className;
            //var jianhua=wzw.trim(aClassCllect);
            if(reg.test(aClassCllect)){
                    re.push(aChild[i]);
                };
        }        
    }
        
    }
        return re;
    }
    
}

var oUl=document.getElementById("ul");
    var s=wzw.getByClass(oUl,"red");
    
    for(var i=0;i<s.length;i++){
        s[i].style.color="red";    
    }

</script>

getElementsByClassName的更多相关文章

  1. DOM getElementsByClassName IE兼容方案

    平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElement ...

  2. 深入理解javascript选择器API系列第二篇——getElementsByClassName

    × 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...

  3. getElementsByClassName简单实现

    function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...

  4. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别

    1. getElementById() getElementsByTagName()  javascript原生的方法,这两个不会有兼容性问题. 2. getElementsByClassName() ...

  6. 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法

    try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...

  7. getElementsByClassName 兼容性

    getElementsByClassName是html5 新增加的一个类名.该方法可以让我们通过class属性中的类名来访问元素.不过该方法比较新,某些DOM树还没有,因此在使用中要当心.由于只有较新 ...

  8. 解决getElementsByClassName的兼容性问题

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 解决ie8(及其以下)不支持getElementsByClassName的问题

    这篇技术笔记与大家分享的是:解决IE8(及以下)不支持getElementsByClassName的方法.如果有说错的地方,麻烦留言告诉我,我及时更正,一来是更新一下我的认知,二来也是不要误导的他人, ...

  10. IE8以下不支持getElementsByClassName方法

    function getElementsByClassName(classStr,tagName,element){ tagName = (tagName || '*'); element = (el ...

随机推荐

  1. full_case & parallel_case

    case中的full_case与parallel_case讨论: 1)术语介绍: 整个case模块叫做:case_statement,注释部分叫做case_statement_header case ...

  2. ThinkPHP讲解(七)——修改删除

    修改数据 方式一:数组方式,直接将数据库里需要修改的内容进行修改 function Update() { //1.数组方式 $model=D("Info"); $attr=arra ...

  3. Android_adb详解

    adb定义:adb(android debug bridge)是android系统中的一种命令行工具,通过它可以和android设备或模拟器通信. adb工具位置: <path-to-sdk&g ...

  4. Servlet概念框架

    以 Servlet 3.0 源代码为基础.Servlet 是 Javaweb 应用的基础框架,犹如孙子兵法之于作战指挥官,不可不知. 概念框架 机制: 事件 Event, 监听器 Listener 数 ...

  5. 使用Mysql ID自增长时 在Mapper的<insert>里添加对应的代码

    <selectKey keyProperty="id" order="AFTER" resultType="java.lang.Long&quo ...

  6. NSAssert用法

    今天突然发现了一个开发ios程序时调试的好帮手-NSAssert()函数.而且和NSLog()函数一样简单易用,代码如下: NSAssert(x!=0,@"x must not be zer ...

  7. mysql传统主从、双主复制+keepalived配置步骤

    mysql主从.主主复制(双主复制)配置步骤 一:MySQL复制: MySQL复制简介: 将master服务器中主数据库的ddl和dml操作通过二进制日志传到slaves服务器上,然后在master服 ...

  8. java中的内存一般分成几部分?

    java中的内存被分成以下四部分: ①.代码区  ②.栈区  ③.堆区   ④.静态区域 栈区:由编译器自动分配释放,存放函数的参数值.局部变量的值等:具体方法执行结束后,系统自动释放JVM内存资源 ...

  9. 限制Input输入类型的常见代码集合

    搜集整理常见的限制INPUT输入类型的实现方式: 1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g ...

  10. 【转】介绍设置Session失效的几种方法

    转载地址:http://developer.51cto.com/art/201106/269493.htm Session对象是HttpSessionState的一个实例.该类为当前用户会话提供信息, ...