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 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参 ...
随机推荐
- [Python] Python中的一些特殊函数
1. 过滤函数filter 定义:filter 函数的功能相当于过滤器.调用一个布尔函数bool_func来迭代遍历每个列表中的元素:返回一个使bool_func返回值为true的元素的序列. a=[ ...
- Go - 变量初始化 及 注意事项
Go变量 初始化 对 复合类型(数组.切片.字典.结构体)变量的初始化是,有一些语法限制: 1.初始化表达式必须包含类型标签: 2.左花括号必须在类型尾部,不能另起一行: 3.多个成员初始值以逗号分隔 ...
- Shell入门教程:Shell变量
变量 是一种很“弱”的变量,默认情况下,一个变量保存一个串,Shell不关心这个串是什么含义.所以若要进行数学运算,必须使用一些命令例如 let.declare.expr.双括号等. Shell变量可 ...
- 【Alpha】Daily Scrum Meeting第五次
一.本次Daily Scrum Meeting主要内容 每个人学习情况 任务安排 界面设计问题,怎样让界面更好看? 二.任务安排 学号尾数 昨天做的任务 今天的任务 明天的任务 612 时间轴控件优化 ...
- SpringMVC Controller介绍
SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...
- Python的由来
Python的由来 Python这门语言是由C开发而来. C语言: 代码编译得到 机器码 ,机器码在处理器上直接执行,每一条指令控制CPU工作 其他语言: 代码编译得到 字节码 ,虚拟机执行字节码并转 ...
- ACM/ICPC 之 网络流-拆点构图(POJ2391)
需要直接到达,因此源点经过三条边后必须要达到汇点,但为了保证网络流的正确性(路径可反悔),因此不可限制层次网络的最高层次为3,最好的方法既是让所有点拆分成两个点,一个点从汇点进入,一个点通向汇点,任意 ...
- PHP多进程编程实例
这篇文章主要介绍了PHP多进程编程实例,本文讲解的是在Linux下实现PHP多进程编程,需要的朋友可以参考下 羡慕火影忍者里鸣人的影分身么?没错,PHP程序是可以开动影分身的!想完成任务,又觉得一个进 ...
- Python之路
Python学习之路 第一天 Python之路,Day1 - Python基础1介绍.基本语法.流程控制 第一天作业第二天 Python之路,Day2 - Pytho ...
- Git命令之资源
https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E6%96%B0%E5%BB%BA% ...