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

  1. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  2. Javascript入门(二)变量、获取元素、操作元素

    一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...

  3. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  4. JavaScript学习笔记 - 入门篇（3）- DOM操作

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  5. 『与善仁』Appium基础 — 22、获取元素信息的操作（一）

    目录 1.获取元素文本内容 (1)text()方法 (2)get_attribute()方法 (3)综合练习 2.获取元素在屏幕上的坐标 1.获取元素文本内容 (1)text()方法 业务场景: 进入 ...

  6. javascript学习之路之元素获取和设置属性

    收拾心情,学习学习js!总结下自己的学习所得! 现有的有三种方法可以获取元素的节点,分别是通过元素ID,通过标签名和类名来获取的 1.GetElmentById:将返回一个与那个有给定ID属性的值的元 ...

  7. JavaScript 学习（2）表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  8. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  9. Selenium2学习-031-WebUI自动化实战实例-029-JavaScript 在 Selenium 自动化中的应用实例之四（获取元素位置和大小）

    通过 JS 或 JQuery 获取到元素后,通过 offsetLeft.offsetTop.offsetWidth.offsetHeight 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参 ...

随机推荐

  1. How to generate UML Diagrams from Java code in Eclipse

    UML diagrams compliment inline documentation ( javadoc ) and allow to better explore / understand a ...

  2. CentOS6.3搭建Nginx代理访问MongoDB GridFS图片资源

    PHP可以直接读取MongoDB GridFS中的图片并显示到页面中,但对PHP的压力就大了.偶然机会,了解到Nginx可以代理访问,实现过程如下: 1.工具准备 安装一些必要的编译工具及库,这里是直 ...

  3. sqlplus连接oracle失败分析和解决

    背景: 多台Linux服务器需要安装Oracle客户端,实现和Oracle数据库连接做业务处理. 安装完第一台后,直接将安装的目录压缩并复制到其他几台机器上,启动sqlplus连接数据库时,一直提示输 ...

  4. FZU 2112 并查集、欧拉通路

    原题:http://acm.fzu.edu.cn/problem.php?pid=2112 首先是,票上没有提到的点是不需要去的. 然后我们先考虑这个图有几个连通分量,我们可以用一个并查集来维护,假设 ...

  5. 【MySQL】使用Length和Cast函数计算TEXT类型字段的长度

    背景: 前段时间,业务需要,为了快速让解析的Excel入库,所以把不是很确定的字段全部设置成了TEXT. 今天需要进行表结构优化,把字段长度控制在合适的范围,并尽量不使用TEXT类型. -- 计算长度 ...

  6. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  7. OC编程之道-创建对象之原型模式

    一 什么是原型模式?(what) 有些对象的创建代价过大或过于复杂,要是可以重建相同的对象并作轻微的改动,事情会容易的多(效率变高).典型的例子是复制组合结构(eg树形结构),从零开始构建一个树型组合 ...

  8. jquery ajax 请求参数详细说明 及 实例

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. Java通过sessionId获取Session

    Servlet2.1之后不支持SessionContext里面getSession(String id)方法. 但是,我们可以通过HttpSessionListener监听器和全局静态map自己实现一 ...

  10. yii2.0 框架邮件的发送

    第一步: 在main-local.php中的components中配置mailer: $config = [ 'components' => [ 'mailer' => [ 'class' ...