代码:

 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. (day44)css样式、css布局

    目录 一.css样式 (一)文字样式 (1)文字字体font-family (2)字体大小font-size (3)字体粗细font-weight (4)字体颜色color (二)文本样式 (1)文字 ...

  2. pycharm配置mysql数据库连接访问

    如图,这是打开后的默认界面.找到界面的“Data base”选项并点击. 这里可以看到当前项目配置的数据库,如果为空,表示未配置数据库.我们可以点击上方“+”号来配置,点击“+”号.在下拉框中我们选择 ...

  3. linux帮助命令使用

    一. help使用 查看ls命令的帮助信息 ls --help            # 查看全部 ls --help | less   # 分页查看, q退出 二. man手册 同一命令存在于多个章 ...

  4. AcWing 91. 最短Hamilton路径

    今天第一次在\(AcWing\)这个网站上做题,来发一下此网站的第一篇题解 传送门 思路 直接枚举的话时间复杂度为\(O(n*n!)\) 复杂度显然爆炸,所以我们用二进制枚举,这样就可以把复杂度降到\ ...

  5. [LeetCode] 263. Ugly Number 丑陋数

    Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...

  6. Windows开机自动登陆 开/关:登录需按Ctrl+Alt+del的功能

    Win10.Win7.WinXP开机自动登录: Win+R组合键打开“运行”,输入“netplwiz” 在弹出的“用户帐户”窗口中,把取消勾选“要使用本机,用户必须输入用户名和密码”,然后“应用”. ...

  7. idea之导入Eclipse Maven项目

    Idea之导入Eclipse Maven项目:https://blog.csdn.net/qq_33442160/article/details/81876428参考上述链接即可,这里不再赘述.

  8. 【前端知识体系-HTML相关】HTML基础知识强化总结

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  9. PhpStorm注册使用方法

    解压 sudo tar -zvxf PhpStorm-2019.3.tar.gz -C /usr/local 屏蔽hosts # Phpstorm 0.0.0.0 account.jetbrains. ...

  10. Nginx php上传文件大小的设置