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等等,通过这些类和函数,我们可以方便的将一个日期对象按照格式的要求输出为字符串,例如对于同一 ...
随机推荐
- C++双线性插值-片段
代码不能直接使用. for (int j = strRY; j<endRY; ++j) { float * pR = result.ptr<float>(j); for (int i ...
- zz深度学习目标检测2014至201901综述
论文学习-深度学习目标检测2014至201901综述-Deep Learning for Generic Object Detection A Survey 发表于 2019-02-14 | 更新 ...
- jsp中如何使用Ueditor
在jsp页面中类似word编辑器操作textarea 使用步骤: step1.官网下载Ueditor http://ueditor.baidu.com/website/download.html ...
- 使用CSS来渲染HTML的表单元素
效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...
- C# 集合根据属性去重筛选
1.单个属性去重筛选 //去重筛选 var ChgDtlVoList = datas.Where((x, i) => datas.FindIndex(z => z.ChgId == x.C ...
- [LeetCode] 674. Longest Continuous Increasing Subsequence 最长连续递增序列
Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...
- [LeetCode] 103. Binary Tree Zigzag Level Order Traversal 二叉树的之字形层序遍历
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- Codeforces Round #606 (Div. 1) Solution
从这里开始 比赛目录 我菜爆了. Problem A As Simple as One and Two 我会 AC 自动机上 dp. one 和 two 删掉中间的字符,twone 删掉中间的 o. ...
- luogu P5606 小 K 与毕业旅行 - 构造 - 多项式
题目传送门 传送门 先考虑 $a_i > 0$ 的情况.考虑构造这样一个顺序:$a_i$ 要么和后面的数的乘积都大于 $w$ 要么都小于等于 $w$. 这个构造可以这样做: vector< ...
- JVM系列之四:运行时数据区
1. JVM架构图 Java虚拟机主要分为五大模块:类装载器子系统.运行时数据区.执行引擎.本地方法接口和垃圾收集模块. 2. JDK1.7内存模型-运行时数据区域 根据<Java 虚拟机规范( ...