背景:

由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用

 

方法一:

  1. function getElementByClassName(parent,tagName,className) {
  2.  
  3. /*
  4. *参数说明:
  5. *@parent:父元素,默认为document
  6. *@tagName:子元素的标签名
  7. *@className: 用空格分开的className字符串
  8. */
  9.  
  10. var aEls=parent.getElementsByTagName(tagName);
  11.  
  12. var arr=[];
  13.  
  14. for(var i=0;i<aEls.length;i++){
  15.  
  16. var aClassName=aEls[i].className.split(' ');//注意,是用' '(空格)拆分
  17.  
  18. for(var j=0;j<aClassName.length;j++){
  19.  
  20. if(aClassName[j] == className){
  21. arr.push(aEls[i]);
  22. break;
  23. }
  24. }
  25.  
  26. }
  27.  
  28. return arr;
  29. }

方法二:

  1. function getElementByClassName(parent,tagName,className) {
  2.  
  3. /*
  4. *参数说明:
  5. *@parent:父元素,默认为document
  6. *@tagName:子元素的标签名
  7. *@className: 用空格分开的className字符串
  8. */
  9.  
  10. var aEls=parent.getElementsByTagName(tagName);
  11.  
  12. var arr=[];
  13.  
  14. for(var i=0;i<aEls.length;i++){
  15.  
  16. if(aEls[i].classList.contains(className)){
  17. arr.push(aEls[i]);
  18. }
  19.  
  20. }
  21.  
  22. return arr;
  23. }

测试:

  1. <div id="area">
  2. <p class="p1">1</p>
  3. <p class="p1">2</p>
  4. <p class="p2 p3">3</p>
  5. <p class="p1 p3">4</p>
  6. <p class="p2 p2">5</p>
  7. </div>
  8.  
  9. <script type="text/javascript">
  10. var oArea=document.getElementById('area');
  11. var aP1=getElementByClassName(oArea,'p','p1');
  12. var aP2=getElementByClassName(oArea,'p','p2');
  13.  
  14. console.log(aP1);
  15. console.log(aP2);
  16.  
  17. </script>

方法一,测试结果:

方法二,测试结果:

了解更多:

1#支持多个class查询和在某个范围内进行查询的getElementsByClassName实现

http://www.cnblogs.com/fool/archive/2010/10/09/1846424.html

2#getElementsByClassName的理想实现

http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html

Javascript:getElementsByClassName的更多相关文章

  1. [ javascript ] getElementsByClassName与className和getAttribute!

    对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题. 那么须要模拟出getElementsByClassName  须要採用className属性 ...

  2. javascript getElementsByClassName扩展函数

    代码: function getElementsByClassName(){ if(!arguments[0]){return []};//未指定任何参数,直接返回 var args=argument ...

  3. (转载)怎么写tab?

    演示地址:http://www.adanghome.com/js_demo/3/ =========================================================== ...

  4. RobotFramework测试问题二:各种元素不能定位问题

    各种元素不能定位问题 一.元素定位 A. Click Element + xpath B. Click Element + contains C. Execute Javascript + getEl ...

  5. 深入理解javascript选择器API系列第二篇——getElementsByClassName

    × 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...

  6. 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法

    try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...

  7. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

  8. javascript中document.getElementsByClassName兼容性封装方法一

    var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. SQL读取系统时间的语法(转)

    --获取当前日期(如:yyyymmdd) select CONVERT (nvarchar(12),GETDATE(),112) --获取当前日期(如:yyyymmdd hh:MM:ss)select ...

  2. Html.RenderPartial和Html.RenderAction的区别

    添加一个PartialController控制器 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  3. 关于IIS部署成功后,局域网其他用户无法访问的问题解决方法

    关于win7部署iis后,局域网的其他用户不能访问的问题.   在win7系统中,部署好iis后,自己本地可以发布和预览.但在局域网中的其他用户不可以访问.下面说一下这个原因. 这是因为win7自带的 ...

  4. jquery 滚动加载

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...

  5. Try,Catch,Finally三块中如果有Return是怎么个运行顺序

    今天看一个Java SSH的面试题,题目大概意思是:try.catch中存在return语句,还会执行finally块吗?如果执行,是return先执行还是finally先执行?如果有多个return ...

  6. 看android的书的体会

    android书上面的代码有时候有问题,可以在网上搜索这些功能.网上和官方文档里面有很好的说明和例子.

  7. handler更新UI主线程

    示例:下面代码的功能是修改UI主线程TextView的内容 public class MainActivity extends Activity { private Button btn_start; ...

  8. 详解boost库中的Message Queue .

    Message Queue(后文简写成MQ或消息队列)是boost库中用来封装进程间通信的一种实现,同一台机器上的进程或线程可以通过消息队列来进行通迅.消息队列中的消息由优先级.消息长度.消息数据三部 ...

  9. osg三维重建的两种方法剖析:三角面片(osgUtil::DelaunayTriangulator)和四角面片(osg::HeightField) (2)

    // perform very basic sanity-check validation on a heightfield.bool validateHeightField(osg::HeightF ...

  10. Oracle错误问题---- 《ora-12638:身份证明检索失败》

    使用客户端可以连接,但只有一个站点出现此问题,非常郁闷,网上查了一下,发现是用户认证问题,解决办法如下: 在ORACLE客户端目录下 NETWORK/ADMIN下的sqlnet.ora,使用记事本打开 ...