<!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. Solr5.4.0部署到Tomcat

    所用工具 下载 solr 5.4.0 版本:http://www.apache.org/dyn/closer.lua/lucene/solr/5.4.0 下载 Tomcat(6以上版本),另外可以根据 ...

  2. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  3. Spring中的JdbcTemplate使用

    1.引出SpringJDBC的概念 在学习JDBC编程时我们会感觉到JDBC的操作是多么繁琐,那么当我们学习的Hibernate框架时,我们感觉到数据库的操作也变非常简单,提高了开发效率.但是当使用H ...

  4. Linux IO模式及 select、poll、epoll详解

    linux的IO调度文章==> https://segmentfault.com/a/1190000003063859?hmsr=toutiao.io&utm_medium=toutia ...

  5. ffmpeg-20160901-bin.7z

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

  6. nginx+webpy配置

    之前搞app时候学的webpy,一直用的自带webserver,最近研究nginx一段时间,决定二者结合玩一下~ 把搭建的要点总结下,说不定哪天还得用——其实平时手挺懒的... 1 必备模块和背景知识 ...

  7. LeetCode 119 Pascal's Triangle II

    Problem: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Ret ...

  8. unity3d中串口的使用

    工作中遇到了串口的问题,通过查资料&实验写出了下面代码: 关于串口的代码我在网上看了好多,一种是用事件来做,另外一种使用线程来做:(经过试验,unity无法用串口自带的事件进行数据读取): 看 ...

  9. Web开发基本准则-55实录-缓存策略

    续上篇<Web开发基本准则-55实录-Web访问安全>. Web开发基本准则-55实录-缓存策略 郑昀 创建于2013年2月 郑昀 最后更新于2013年10月26日 提纲: Web访问安全 ...

  10. DS28E01芯片解密DS28E01-100单片机解密多少钱？

    DS28E01芯片解密DS28E01-100单片机解密多少钱? DS28E01-100将1024位EEPROM与符合ISO/IEC 10118-3安全散列算法(SHA-1)的质询响应安全认证结合在一起 ...