javascript学习之通过class获取元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过class获取元素</title>
<style type="text/css">
ul li{ list-style: none; height: 20px; padding: 10px;line-height: 20px;}
ul li.red{ background: #999;}
</style>
<script type="text/javascript">
/*
//第一种
function getByClass(obj,attr){
var aEle = obj.getElementsByTagName('*');
var arr = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className == attr){
arr.push(aEle[i]);
}
}
return arr;
}*/
/*
//第二种
function getByClass(obj,sClass){
var aEle = obj.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.indexOf(sClass) != -1){
aRes.push(aEle[i]);
}
}
return aRes;
}*/
function findAttr(obj,sClass){
for(var i=0;i<obj.length;i++){
if(obj[i] == sClass) return true;
}
return false;
}
function getByClass(obj,sClass){
if(obj.getElementsByClass){//这个getElementsByClass不兼容Ie8以下的，
var aEle = obj.getElementsByClass(sClass);
return aEle;
}else{
var aEle = obj.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<aEle.length;i++){
var aTmp = aEle[i].className.split(' ');
if(findAttr(aTmp,sClass)){
aRes.push(aEle[i]);
}
}
return aRes;
}
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl = getByClass(oDiv,'ul1');
var aLi = getByClass(oUl[0],'red');
alert(aLi.length);
}
</script>
</head>
<div id="div1">
<ul class="ul1">
<li class="red">11111</li>
<li>22222</li>
<li class="red blue">3333</li>
<li>55555</li>
<li class="red">5555</li>
<li>6666</li>
</ul>
</div>
</html>
javascript不像Jquery那样可以很容易的获取元素，今天写了一个小方法Javascript通过class获取元素
1.用'=='来判断，这个判断如果class有多个会获取不到
2.用indexOf来判断，这个判断如果class有包含你要的找的class也会获取到，如：你要找class='test',但是有一个class='tests'也会被获取到
3.这个不会出错
javascript学习之通过class获取元素的更多相关文章
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- Javascript入门(二)变量、获取元素、操作元素
一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- JavaScript学习笔记 - 入门篇（3）- DOM操作
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- 『与善仁』Appium基础 — 22、获取元素信息的操作（一）
目录 1.获取元素文本内容 (1)text()方法 (2)get_attribute()方法 (3)综合练习 2.获取元素在屏幕上的坐标 1.获取元素文本内容 (1)text()方法 业务场景: 进入 ...
- javascript学习之路之元素获取和设置属性
收拾心情,学习学习js!总结下自己的学习所得! 现有的有三种方法可以获取元素的节点,分别是通过元素ID,通过标签名和类名来获取的 1.GetElmentById:将返回一个与那个有给定ID属性的值的元 ...
- JavaScript 学习（2）表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- Selenium2学习-031-WebUI自动化实战实例-029-JavaScript 在 Selenium 自动化中的应用实例之四（获取元素位置和大小）
通过 JS 或 JQuery 获取到元素后,通过 offsetLeft.offsetTop.offsetWidth.offsetHeight 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参 ...
随机推荐
- CentOS6.3 编译安装LAMP(4)：编译安装 PHP5.2.17
所需源码包: /usr/local/src/PHP-5.2.17/libmcrypt-2.5.8.tar.gz /usr/local/src/PHP-5.2.17/mhash-0.9.9.9.tar. ...
- Linux tar (打包.压缩.解压缩)命令说明 | tar如何解压文件到指定的目录？
打包举例:将 /usr/local/src/zlib-1.2.5目录下的文件打包成 zlib-1.2.5.tar.gz cd /usr/local/src tar -czvf ./zlib-1.2.5 ...
- poj 1695
用动态规划,dp[a][b][c]表示从位置最大的车在a(注意不是第一辆车),第二的车在b,第三的车在c开始最少需要的时间. 方程:dp[a][b][c]=max{dp[a+1][b][c], ...
- 用Canvas写桌球游戏！！！
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...
- php函数parse_url
1.需求 了解parse_url的使用方法 2.实例 $uri = parse_url('http://dummy'.$_SERVER['REQUEST_URI']); var_dump($uri); ...
- Java 23种设计模式 （通俗易懂解释收集整理）
(补充中...) P02 抽象工程模式 P14 TemplateMethod 模板方法模式 讲清楚了为什么叫做模板方法 http://www.cnblogs.com/java-my-life/arc ...
- angularjs 笔记(1) -- 引导
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...
- ACM/ICPC 之 混合图的欧拉回路判定-网络流(POJ1637)
//网络流判定混合图欧拉回路 //通过网络流使得各点的出入度相同则possible,否则impossible //残留网络的权值为可改变方向的次数,即n个双向边则有n次 //Time:157Ms Me ...
- Apache shiro 文章推荐
均为系列文章,篇幅略长,适合入门. shiro源码分析 跟我学shiro
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...