<!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. 妈妈再也不用担心别人问我是否真正用过redis了

    1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...

  2. Node.js入门学习笔记（三）

    基于事件驱动的回调 这个问题不好回答,不过这是Node.js原生的工作方式.它是事件驱动的,这也是它为什么这么快的原因.你可以花一点时间阅读一下Felix Geisendörfer的大作 Unders ...

  3. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. npm start 作用

    在配置phonecat项目时需要运行npm start在本地配置一个服务器环境,npm start首先会安装一系列的必要程序,这些程序依赖package.json中的内容,package.json中的 ...

  5. C#动态创建和动态使用程序集、类、方法、字段等

    C#动态创建和动态使用程序集.类.方法.字段等 分类:技术交流 (3204)  (3)   首先需要知道动态创建这些类型是使用的一些什么技术呢?其实只要相关动态加载程序集呀,类呀,都是使用反射,那么动 ...

  6. ffmpeg-20160901-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...

  7. NHibernate3快速上手教程FluentNHibernate配置与DBHelper

    很多学习NHibernate的新手很容易卡在配置文件这一关,正所谓万事开头难,上手后再配合官方文档就比较容易了. 网上关于配置文件的资料非常多,但由于版本的问题,许多老的教程中都没有明确指出类库的版本 ...

  8. Android笔记：调试android程序

    1.Debug 第一步: 添加断点 第二步: 右击项目→Debug As→Android Application  //之后一个对话框出现,一会自动消失 第三步: 执行手机端操作,Eclipse 就会 ...

  9. hive 表分区操作

    hive的数据查询一般会扫描整个表,当表数据太大时,就会消耗些时间,有时候我们只需要对部分数据感兴趣,所以hive引入了分区的概念    hive的表分区区别于一般的分布式分区(hash分区,范围分区 ...

  10. 安装SQL SERVER 2005出现“sql2005 执行安装向导期间出错 ”

    安装sql server 2005时出现“sql2005 执行安装向导期间出错”的提示,百度找了一下,发现原来是解压时候才安装了CD1的,还有CD2的没解压安装,解压CD2安装即可