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 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参 ...
随机推荐
- linux下实现在程序运行时的函数替换(热补丁)
声明:以下的代码成果,是参考了网上的injso技术,在本文的最后会给出地址,同时非常感谢injso技术原作者的分享. 但是injso文章中的代码存在一些问题,所以后面出现的代码是经过作者修改和检测的. ...
- There are no resources that can be added or removed from the server
第1步.新建一个“Dynamic Web Project” 第2步.把新建项目里面的.project文件和.settings文件夹复制到导入的那个项目里面. 第3步.把web projiect set ...
- JavaScript访问ab页面定时跳转代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 孙鑫C++教程留下来的作业--如何让工具栏在原来隐藏的位置出现
--加油,不仅仅是口号! BEGIN---------------------------------- 将工具栏进行停靠.当隐藏后再次点击出现的时候它出现在工具栏顶部了,并没有停靠在原来的位置,如何 ...
- linux下编译安装vim7.4并安装clang_complete插件
linux下编译安装vim7.4并安装clang_complete插件 因为debian里软件仓库中下载安装的vim是不支持python写的插件的(可以打开vim,在命令模式先输入:py测试一下),导 ...
- Longest Absolute File Path
Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...
- 数据库DBA(3年以内需求)
1.DBA工作:日常维护,备份及恢复,系统安装,补丁应用,健康检查及优化,故障处理; 2.精通sql语句.视图存储过程.函数的编写.触发器; 3.精通data guard/RAC,能顺利配置和管理da ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- struts2学习记录
1.对于使用Struts2框架的应用而言,尽量不要让超级链接直接接到某个视图资源,因为这种方式增加了额外的风险.推荐将所有请求都发送给Struts框架,让该框架来处理用户请求,即使只是简单的超级链接. ...
- C++ 基础知识复习(三)
43. 继承的几种方式: 答:共有继承public,保护继承protected,私有继承private.其中后两种继承会改变原有的访问级别. 44. 深复制与浅复制: 答:简单理解,深复制自己申请了内 ...