getElementsByClassName
<!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的更多相关文章
- DOM getElementsByClassName IE兼容方案
平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElement ...
- 深入理解javascript选择器API系列第二篇——getElementsByClassName
× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...
- getElementsByClassName简单实现
function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...
- 多个table切换 getElementsByClassName
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
1. getElementById() getElementsByTagName() javascript原生的方法,这两个不会有兼容性问题. 2. getElementsByClassName() ...
- 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法
try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...
- getElementsByClassName 兼容性
getElementsByClassName是html5 新增加的一个类名.该方法可以让我们通过class属性中的类名来访问元素.不过该方法比较新,某些DOM树还没有,因此在使用中要当心.由于只有较新 ...
- 解决getElementsByClassName的兼容性问题
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 解决ie8（及其以下）不支持getElementsByClassName的问题
这篇技术笔记与大家分享的是:解决IE8(及以下)不支持getElementsByClassName的方法.如果有说错的地方,麻烦留言告诉我,我及时更正,一来是更新一下我的认知,二来也是不要误导的他人, ...
- IE8以下不支持getElementsByClassName方法
function getElementsByClassName(classStr,tagName,element){ tagName = (tagName || '*'); element = (el ...
随机推荐
- 夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建（百度编辑器的引入）
我们现在就开始搭建我们的后台栏目页的后台了: 首先创建一个CategoryController.class.php的控制器,让列表页和添加页面显示出来先: 然后就是开始动手修改我们的视图部分了: 我们 ...
- knockout之入门介绍
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript的前端UI简单化.Knockout是一个以数据模型(data model)为基础的能够帮助你创建丰富文本,响应显示和编 ...
- ASP.NET MVC5 新特性：Attribute路由使用详解 （转载）
1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...
- web跨页弹窗选值
最近在项目中看到这样一种效果——点击当前网页文本框,然后弹出一个缩小的网页,并在网页里选择或填写数据,然后又返回当前网页,小网页关闭.感觉非常不错,其实在以前网上也看见过,只是当时没有留心.今天抽时间 ...
- MySQL rename database如何做？
虽然MySQL里面有rename database的语法,但是只是在5.1.7 to 5.1.23提供的,其他版本并没有,要想做rename操作该如何做呢?percona提供了一个shell #!/b ...
- java中的单例设计模式
单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供 ...
- Lucas定理模板
用于大组合数对p取模的计算. #include <cstdio> #include <iostream> #include <cmath> #include < ...
- ORACLE--分区表数据清理
由于分区表数据增加:没做清除操作:导致表空间告急.需要清理很久之前的数据:释放空间.步骤如下 一,查看哪个表占的空间 SELECT t.segment_name, SUM(t.bytes / 1024 ...
- ZOJ 3861 - Valid Pattern Lock
3861 - Valid Pattern Lock Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & ...
- Python模块学习
6. Modules If you quit from the Python interpreter and enter it again, the definitions you have made ...