<!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. Spring中的JdbcTemplate使用

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

  2. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  3. 值得推荐的android开源框架

    1.volley 项目地址https://github.com/smanikandan14/Volley-demo (1) JSON,图像等的异步下载: (2) 网络请求的排序(scheduling) ...

  4. Android 无线调试

    首先保证电脑和手机在统一局域网.并知道手机的局域网 ip1. 用usb线连接手机和电脑,并在电脑终端输入 adb tcpip 5555 adb connect <ip>2. 取消usb连接 ...

  5. js跨域解决方案（转载）

    1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...

  6. tomcat相关问题

    动态资源:需要转换成静态资源后再响应给客户端,例如:jsp.servlet,其他语言的动态资源有:asp.php 静态资源:无需转发即可直接响应给客户端,例如:html.css.javascript ...

  7. javascript实现简单多文件上传

    该上传功能主要用到html5新属性FormData,通过XMLHttpRequest对象send到服务器,支持文件多选和多次选择.文件去重.移除已选文件等 1.html代码 <div class ...

  8. strust1与strust2,springmvc三者之间的区别？

    strust1与struts2的区别    1.struts2是基于webWork的一个全新的框架,比struts1学习更方便    Struts2主要是改进了Struts1的servlet和acti ...

  9. 【Java EE 学习 28 下】【Oracle面试题2道】【Oracle练习题3道】

    一.已知程序和数据 create table test1 (id int primary key, name ), money int); ,); ,); ,); ,); 要求根据下图写出相应的sql ...

  10. 【CentOS】磁盘管理与vim编译器

    一.查看硬盘或目录容量 1.df  [-hmkiT] -h  查看系统磁盘使用情况 -m  使用MBytes显示结果 -k  使用KBytes显示结果 -i  查看inode -T  查看Type 2 ...