代码:

 function getElementsByClassName(){
if(!arguments[0]){return []};//未指定任何参数,直接返回
var args=arguments,
a=args[0],//要查找的样式名称
b=typeof(args[1])=='string' && args[1]||'*',//指定的标签
c=((typeof(args[1])!='string' && args[1]) || args[2])||document,//在指定的容器内查找
d=a.split(' '),//样式名称列表
e=d.length,//待查找的样式总数
f=e>1,//是否查找多个样式
g={},//存储所有样式:for IE
h=[];//最终对象存储
if(f){
for(var i=0;i<e;i++){
g[d[i]]=!0;
}
}else{
g[a]=!0;
};
if(document.all || (!document.all && f)){
var o=c.getElementsByTagName(b);
for(var i=0;i<o.length;i++){
if(g[o[i].className]){
h.push(o[i]);
}
}
}else{
h=c.getElementsByClassName(a);//非IE标准浏览器:为保证元素的原有索引,仅在指定查找一个样式时使用此方法
};
return h;
};

用法:

三个参数:
1:待查找的样式,可指定多个,用空格分隔;未指定时直接返回
2:[可选项]可指定查找的特定标签,默认为:遍历所有标签*
3:[可选项]指定父容器,默认为:document
可跳过第2个参数直接指定第3个参数。
测试DOM:
<div class="c">我在id=parent的层以外</div>
<div id="parent">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
<div class="b">56</div>
<div class="b">78</div>
<span class="c">9</span>
</div>
//下面调用,仅返回parent内部,div的样式符合条件的元素
var o=getElementsByClassName("c b",'div',document.getElementById('parent'));
for(var i=0;i<o.length;i++){
alert(o[i].innerHTML)
};
//下面调用,返回div的样式符合条件的元素
var o=getElementsByClassName("c b",'div');
for(var i=0;i<o.length;i++){
alert(o[i].innerHTML)
};
//下面调用,仅返回parent内部,所有样式符合条件的元素
var o=getElementsByClassName("c b",document.getElementById('parent'));
for(var i=0;i<o.length;i++){
alert(o[i].innerHTML)
};
//下面调用,返回所有样式符合条件的元素
var o=getElementsByClassName("c b");
for(var i=0;i<o.length;i++){
alert(o[i].innerHTML)
};

javascript getElementsByClassName扩展函数的更多相关文章

  1. Javascript:getElementsByClassName

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

  2. [ javascript ] getElementsByClassName与className和getAttribute!

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

  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时间处理扩展函数

    在JavaScript中,时间处理是经常需要用到的.最近想要慢慢建立自己的代码库,整理了几个之前用到的js处理时间的函数,发出来跟大家分享一下,以后的使用中会不断增加和修改代码库. 把字符串转换为日期 ...

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

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

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

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

  9. 一个JavaScript日期格式化扩展函数

    我们都知道在Java和PHP语言中,有专门用于格式化日期对象的类和函数,例如Java中的DateFormat等等,通过这些类和函数,我们可以方便的将一个日期对象按照格式的要求输出为字符串,例如对于同一 ...

随机推荐

  1. 笔记15:Django提升篇

    django提升 (1)打包应用程序:可重用性 打包 Python 程序需要工具:setuptools .打包时候建议使用django-appname 1 在你的 Django 项目目录外创建一个名为 ...

  2. django rest framework 过滤 lim分页

    一.过滤 1.首先引用diango 自带的过滤配置 2.导入模块 from django_filters.rest_framework import DjangoFilterBackend from ...

  3. 桌面图标管理工具-Rolan(网上收集,仅供学习与研究,支持正版)

    Rolan 是一个轻量级启动器,“你可以通过将文件拖到软件窗口中,然后通过像 QQ 一样的吸附或者键盘热键随时呼出,点击图标即可启动,使用起来非常方便快捷! 官网:https://getrolan.c ...

  4. python中调用httpclient接口的实例代码

    #coding=utf-8 import httplib,urllib #get调用 httpClient=None try: params=urllib.urlencode({'account':' ...

  5. 莫烦TensorFlow_11 MNIST优化使用CNN

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #number 1 to 10 d ...

  6. python27期day13:闭包、装饰器初始、标准版装饰器、作业题

    1.闭包: 保护数据安全.保护数据干净性. 2.闭包的定义:在嵌套函数内.使用非全局变量(且不使用本层变量) 将嵌套函数返回 闭包的目的:要接受被装饰的函数和被装饰函数需要的参数3.闭包举例子: de ...

  7. CS231n:

    Bayesian Hyperparameter Optimization is a whole area of research devoted to coming up with algorithm ...

  8. 洛谷 P3998 [SHOI2013]发微博

    洛谷 P3998 [SHOI2013]发微博 洛谷传送门 题目描述 刚开通的 SH 微博共有n个用户(1Ln标号),在这短短一个月的时间内, 用户们活动频繁,共有m 条按时间顺序的记录: ! x 表示 ...

  9. Visualforce 页面的生命周期

    了解 Visualforce 页面的生命周期可以让我们明白其各个元素的执行顺序.改变逻辑,从而提高开发效率,避免不必要的错误. 在官方文档中有详细的讲解.本文摘取其中的要点,作为一个总结. Visua ...

  10. wal2json pg扩展centos7构建

    使用wal2json可以将pg 变动输出为json 格式,是一个pg 扩展,支持pg9.4+ 目前看到netflix 的dblog 对于pg 的支持就是基于此插件 以下是关于centos 7的构建说明 ...