代码:

 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. 201871010133-赵永军《面向对象程序设计(java)》第十周学习总结

    201871010133-赵永军<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  2. js正则表达式常用方法总结

    1.test()  方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. var patt = /e/; patt.test("The ...

  3. C++面向对象程序设计学习笔记(7)

    模板与异常处理 模板的概念 模板是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型作为参数. 模板分为函数模板和类模板,它们分别允许用户构造模板类和模板函数 函数模板与模板函数 函数模板实际 ...

  4. B1023 组个最小数 (20 分)

    一.技术总结 这一题主要的处理点是数字0别在第一个位置输出,这里提供两种解决思路. 一个是直接在一个for循环里面只要输出了一个位置后直接判断,是否了0的数字可以输出. 还有一个就是直接for循环一次 ...

  5. 修改hadoop/hbase/spark的pid文件位置

    1.说明 当不修改PID文件位置时,系统默认会把PID文件生成到/tmp目录下,但是/tmp目录在一段时间后会被删除,所以以后当我们停止HADOOP/HBASE/SPARK时,会发现无法停止相应的进程 ...

  6. [LeetCode] 871. Minimum Number of Refueling Stops 最少的加油站个数

    A car travels from a starting position to a destination which is target miles east of the starting p ...

  7. Spring Boot中的Mongodb多数据源扩展

    在日常工作中,我们通过Spring Data Mongodb来操作Mongodb数据库,在Spring Boot中只需要引入spring-boot-starter-data-mongodb即可. 然后 ...

  8. 修改Launchpad的命令

    修改Launchpad命令 1.设置Launchpad 图标的列数 defaults write com.apple.dock springboard-columns -int 10 2.设置 Lau ...

  9. Ubuntu 获取内核源码树

    输入:apt-cache search linux-source //查看内核版本 输入:apt-get install linux-source-3.0.0 //获取对应版本的内核,默认安装在/us ...

  10. IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解

    IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解 特别说明:图中的IDEA是2017版本,不过方法对2019版本的IDEA同样适用! 最近笔者测试了好多破解Idea的方 ...