<!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. 2013成都网络赛 J A Bit Fun（水题）

    A Bit Fun Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 微信5.4安卓版重回ios风格 导航菜单都放底栏位置

    微信5.4安卓版发布更新了,由于本人的手机设置软件自动更新,中午的时候才发现微信换成了5.4版本,启动微信后是一个大大的“转账,就是发消息”,进入微信界面有点小惊喜,导航菜单都改为底部tab方式,顶部 ...

  3. Linux进程间通信（六）：共享内存 shmget()、shmat()、shmdt()、shmctl()

    下面将讲解进程间通信的另一种方式,使用共享内存. 一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的进程之间共享和传递数据的一种非常有效的方式 ...

  4. 机器学习 k-临近算法

    程序清单一: from numpy import * import operator def creatDataSet(): group = array([[1.0,1.1],[1.0,1.0],[0 ...

  5. java抽象-老师的生日-逻辑思维-有趣的面试题-遁地龙卷风

    (-1)写在前面 都快去北京了,硬生生的安排一场java考试,对于那些特别细节的东西我忘了吧也不觉得有什么不好,以前都记得,也都见过,只不过平时不常用连接断了,但是你死记硬背是没用的,一段时间后还是会 ...

  6. poj 1112

    昨天晚上看的题. 说实话,我一眼就看出了是二分图,再一眼就看出了是二分图+dp(01背包).但悲剧的是我一眼看出的算法是正确的,但我总以为它是错误的,浪费了很长时间像其他算法(TAT). 今天终于把代 ...

  7. uoj228 基础数据结构练习题

    趁别人题解没有放出来赶快写一篇 整数序列,操作 区间加 区间变成sqrt(下取整) 区间和 考虑一下对于每个区间里所有sqrt不同的段操作,那么可以在O(段数logn)一次的时间内完成sqrt操作.考 ...

  8. senlin __init__() got an unexpected keyword argument 'additional_headers'

    从senlin源码重新编译更新了服务,然后执行 senlin的 cli就遇到了错误: __init__() got an unexpected keyword argument 'additional ...

  9. Linux服务器jps报process information unavailable

    在Linux下执行 jps 是快速查看Java程序进程的命令,一般情况下hadoop,hbase,storm等进程都是通过jps查看,有些时候因为进程没有被正常结束,比如资源占用过大时挂掉或者没有结束 ...

  10. mybatis动态sql

    MyBatis 采用功能强大的基于 OGNL 的表达式来消除其他元素.  if choose(when,otherwise) trim(where,set) foreach 例子(2): &l ...