<!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选择元素的更多相关文章

  1. Appium之UIAutomator API选择元素

    UI Automator测试框架提供了一组API来构建UI测试. 利用UI Automator API可以执行在测试设备中,打开‘设置’菜单或应用启动器等操作. UI Automator测试框架非常适 ...

  2. 第三章：JavaScript选择元素

    我们使用jQuery时,很常用的套路是“两步”第一步:选取元素第二步:对选中的元素执行需要的操作这一章我们重点研究第一步,如何使用jQuery选取元素以及对选取的结果进行“各种筛选”以满足我们的需求. ...

  3. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  4. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  5. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  6. JQuery基础教程：选择元素（下）

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

  7. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  8. JQuery基础教程：选择元素（上）

    jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...

  9. 初识jQuery，八字真言“选择元素，对其操作”

    jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...

随机推荐

  1. 济南学习 Day 3 T2 am

    看程序写结果(program)Time Limit:1000ms Memory Limit:64MB题目描述LYK 最近在准备 NOIP2017 的初赛,它最不擅长的就是看程序写结果了,因此它拼命地在 ...

  2. Ubantu 安装 LAMP环境

    1.通过 apt-get update 命令从ubantu软件源中下载可安装软件的列表. 2.通过一条命令可以一次性的安装LAMP apt-get install apache2 php5 mysql ...

  3. win32开发基础

    收集的,正在学习... 跟我一起玩Win32开发(1):关于C++的几个要点 跟我一起玩Win32开发(2):完整的开发流程 跟我一起玩Win32开发(3):窗口的重绘 跟我一起玩Win32开发(4) ...

  4. Winform合并多个Excel文件到一个文件中（源文件.xls,实际是.xml）

    1.下面两个文件.xls是给的文件,实际上是.xml文件 2.具体的代码 private void btOK_Click(object sender, EventArgs e) { //0.获取路径文 ...

  5. WordPress 主题开发 - (五)WordPress 主题模板及目录结构 待翻译

    While the most minimal of WordPress Themes really only need an index.php template and a style.css fi ...

  6. Z-BlogPHP 安装出现 (8) Undefined offset: 6 解决方法

    有些cp面板的空间会在每个网页头部和页脚增加两个调用的文件,导致zblogPHP安装出错:(8) Undefined offset: 6 主要国外的主机中PHP配置文件两个选项auto_prepend ...

  7. CLR via C# 内存管理读书记

    1. CLR 垃圾回收采用基于代的机制, 在一次垃圾回收中存活下来的对象被提升到另一代 2. 在确认对象是否垃圾时,从一组根开始,根包括静态字段,方法参数,局部变量等 3. 使用CriticalFin ...

  8. 基于Redis主从复制读写分离架构的Session共享

    1.搭建主从复制 第一步:将Redis拷贝到虚拟机上的指定文件夹内,此Redis作为主服务 第二步:将Redis拷贝到本机的指定文件夹内,此Redis作为从服务 第三步:修改主服务的配置文件(redi ...

  9. java中print\println\printf的区别

    print\println\printf的区别 print将它的参数显示在命令窗口,并将输出光标定位在所显示的最后一个字符之后. println 将它的参数显示在命令窗口,并在结尾加上换行符,将输出光 ...

  10. 在Linux下写一个简单的驱动程序

    本文首先描述了一个可以实际测试运行的驱动实例,然后由此去讨论Linux下驱动模板的要素,以及Linux上应用程序到驱动的执行过程.相信这样由浅入深.由具体实例到抽象理论的描述更容易初学者入手Linux ...