javascript getElementsByClassName扩展函数
代码:
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扩展函数的更多相关文章
- Javascript:getElementsByClassName
背景: 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用 方法一: function getElement ...
- [ javascript ] getElementsByClassName与className和getAttribute!
对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题. 那么须要模拟出getElementsByClassName 须要採用className属性 ...
- (转载)怎么写tab?
演示地址:http://www.adanghome.com/js_demo/3/ =========================================================== ...
- RobotFramework测试问题二:各种元素不能定位问题
各种元素不能定位问题 一.元素定位 A. Click Element + xpath B. Click Element + contains C. Execute Javascript + getEl ...
- 深入理解javascript选择器API系列第二篇——getElementsByClassName
× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...
- 整理一些JavaScript时间处理扩展函数
在JavaScript中,时间处理是经常需要用到的.最近想要慢慢建立自己的代码库,整理了几个之前用到的js处理时间的函数,发出来跟大家分享一下,以后的使用中会不断增加和修改代码库. 把字符串转换为日期 ...
- 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法
try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...
- javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法
<a name="target" href="#">链接</a> <p id="target">文字说明 ...
- 一个JavaScript日期格式化扩展函数
我们都知道在Java和PHP语言中,有专门用于格式化日期对象的类和函数,例如Java中的DateFormat等等,通过这些类和函数,我们可以方便的将一个日期对象按照格式的要求输出为字符串,例如对于同一 ...
随机推荐
- 201871010133-赵永军《面向对象程序设计(java)》第十周学习总结
201871010133-赵永军<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- js正则表达式常用方法总结
1.test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. var patt = /e/; patt.test("The ...
- C++面向对象程序设计学习笔记(7)
模板与异常处理 模板的概念 模板是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型作为参数. 模板分为函数模板和类模板,它们分别允许用户构造模板类和模板函数 函数模板与模板函数 函数模板实际 ...
- B1023 组个最小数 (20 分)
一.技术总结 这一题主要的处理点是数字0别在第一个位置输出,这里提供两种解决思路. 一个是直接在一个for循环里面只要输出了一个位置后直接判断,是否了0的数字可以输出. 还有一个就是直接for循环一次 ...
- 修改hadoop/hbase/spark的pid文件位置
1.说明 当不修改PID文件位置时,系统默认会把PID文件生成到/tmp目录下,但是/tmp目录在一段时间后会被删除,所以以后当我们停止HADOOP/HBASE/SPARK时,会发现无法停止相应的进程 ...
- [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 ...
- Spring Boot中的Mongodb多数据源扩展
在日常工作中,我们通过Spring Data Mongodb来操作Mongodb数据库,在Spring Boot中只需要引入spring-boot-starter-data-mongodb即可. 然后 ...
- 修改Launchpad的命令
修改Launchpad命令 1.设置Launchpad 图标的列数 defaults write com.apple.dock springboard-columns -int 10 2.设置 Lau ...
- Ubuntu 获取内核源码树
输入:apt-cache search linux-source //查看内核版本 输入:apt-get install linux-source-3.0.0 //获取对应版本的内核,默认安装在/us ...
- IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解
IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解 特别说明:图中的IDEA是2017版本,不过方法对2019版本的IDEA同样适用! 最近笔者测试了好多破解Idea的方 ...