Javascript通过className选择元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript"> window.onload = function () {
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li"); for (var i = 0; i < aLi.length; i++) {
if (aLi[i].className == "box") {
aLi[i].style.background = "red";
}
}
} //封装了一个方法，通过class选取元素
function getByClass(oParent, sClss) {
var aResult = [];
var aEle = oParent.getElementsByTagName("*");
for (var i = 0; i < aEle.length; i++) {
if (aEle[i].className == "sClss") {
aEle[i].style.background = "red";
aResult.push(aEle[i]);
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<!--
元素属性的操作
第一种：oDiv.style.display="none";
第二种：oDiv.style["display"]="none";
第三种：Dom方式 Dom方式操作元素的属性
获取：getAttribute(名称);//99%一般用不着他
设置：setAttribute（名称，值）;
删除：removeAttribute(名称); 用className选择元素
-->
</body>
</html>
Javascript通过className选择元素的更多相关文章
- Appium之UIAutomator API选择元素
UI Automator测试框架提供了一组API来构建UI测试. 利用UI Automator API可以执行在测试设备中,打开‘设置’菜单或应用启动器等操作. UI Automator测试框架非常适 ...
- 第三章：JavaScript选择元素
我们使用jQuery时,很常用的套路是“两步”第一步:选取元素第二步:对选中的元素执行需要的操作这一章我们重点研究第一步,如何使用jQuery选取元素以及对选取的结果进行“各种筛选”以满足我们的需求. ...
- 抛弃jQuery：DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- Jquery 系列（2） 选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- JQuery基础教程：选择元素（下）
DOM遍历方法 利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...
- JQuery基础教程：选择元素（中）
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- JQuery基础教程：选择元素（上）
jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...
- 初识jQuery，八字真言“选择元素，对其操作”
jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...
随机推荐
- [GeekBand]C++高级编程技术（2）
本篇笔记主要分为两个主要部分,第一部分关于对象模型,第二部分是关于new和delete的更加深入的学习. 一.对象模型 关于vptr(虚指针)和vtbl(虚函数表) 只要用到了虚函数,对象中就会多一个 ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- request.getSession();为什么不用response儿用request！
首先回答为什么分别是response和request这两个内置对象.你得先明白你通过获取对象是做什么用的,是往哪用的.第一个PrintWriter out=response.getWriter()是想 ...
- 《服务器的追踪与审计》RHEL6
在linux系统/etc目录下有两个文件: 服务器的追踪: 当其他人访问我的主机时,通过日志监控到那台主机什么时间通过什么方式登陆,做什么?
- 打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页 ...
- 方法的可变长参数 传入参数个数不确定可用（Type ... values）
/** * 可变长的参数. * 有时候,我们传入到方法的参数的个数是不固定的,为了解决这个问题,我们一般采用下面的方法: * 1． 重载,多重载几个方法,尽可能的满足参数的个数.显然这不是什么好办法. ...
- 为 WordPress 标签添加 rel="nofollow" 属性
WordPress 标签默认并无 rel="nofollow" 属性.rel="nofollow" 属性的作用是:告诉搜索引擎,无需追踪目标页,禁止蜘蛛爬行和传 ...
- 基于Redis主从复制读写分离架构的Session共享
1.搭建主从复制 第一步:将Redis拷贝到虚拟机上的指定文件夹内,此Redis作为主服务 第二步:将Redis拷贝到本机的指定文件夹内,此Redis作为从服务 第三步:修改主服务的配置文件(redi ...
- Python开发【第一篇】Python基础之装饰器
写代码要遵循开发封闭原则,虽然在这个原则是用的面向对象开发,但是也适用于函数式编程,简单来说,它规定已经实现的功能代码不允许被修改,但可以被扩展,即: 封闭:已实现的功能代码块开放:对扩展开发 #s2 ...
- 编写php拓展实例--slime项目（用户登录会话类）
最近公司换了yaf框架,突然对用c实现php拓展感兴趣了,如果一个功能已经很稳定很成熟而且用的地方很多,那么我们就可以尝试用拓展实现(不一定每种情况都可以写成拓展),写成拓展后就不用每次用都包含一 ...