javascript getElementsByClassName函数


Posted in Javascript onApril 01, 2010

今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用。

var getElementsByClassName = function(searchClass, node, tag) { 
if (document.getElementsByClassName) { 
return document.getElementsByClassName(searchClass) 
} else { 
node = node || document; 
tag = tag || "*"; 
var classes = searchClass.split(" "), 
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag), 
patterns = [], 
returnElements = [], 
current, 
match; 
var i = classes.length; 
while (--i >= 0) { 
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)")); 
} 
var j = elements.length; 
while (--j >= 0) { 
current = elements[j]; 
match = false; 
for (var k = 0, kl = patterns.length; k < kl; k++) { 
match = patterns[k].test(current.className); 
if (!match) break; 
} 
if (match) returnElements.push(current); 
} 
return returnElements; 
} 
}

下面是网上其它的一些相关介绍,大家可以一起参考下。

DOM中的getElementsByClassName解释如下:DOM API 中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2 里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

function getElementsByClassName(className, parentElement){ 
var elems = ($(parentElement)||document.body).getElementsByTagName("*"); 
var result=[]; 
for (i=0; j=elems[i]; i++){ 
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){ 
result.push(j); 
} 
} 
return result; 
}

既然有getElementsByClassName,一样可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)
document.getElementsByClassName = function(className,oBox) { 
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素 
this.d= oBox || document; 
var children = this.d.getElementsByTagName('*') || document.all; 
var elements = new Array(); 
for (var ii = 0; ii < children.length; ii++) { 
var child = children[ii]; 
var classNames = child.className.split(' '); 
for (var j = 0; j < classNames.length; j++) { 
if (classNames[j] == className) { 
elements.push(child); 
break; 
} 
} 
} 
return elements; 
} document.getElementsByType = function(sTypeValue,oBox) { 
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等 
this.d= oBox || document; 
var children = this.d.getElementsByTagName('*') || document.all; 
var elements = new Array(); 
for (var ii = 0; ii < children.length; ii++) { 
if (children[ii].type == sTypeValue) { 
elements.push(children[ii]); 
} 
} 
return elements; 
} 
function $() { 
var elements = new Array(); 
for (var ii = 0; ii < arguments.length; ii++) { 
var element = arguments[ii]; 
if (typeof element == 'string') 
element = document.getElementById(element); 
if (arguments.length == 1) 
return element; 
elements.push(element); 
} 
return elements; 
} 
$Cls = function (s,o){ 
return document.getElementsByClassName(s,o); 
}; 
$Type = function (s,o){ 
return document.getElementsByType(s,o); 
}; 
$Tag = function (s,o){ 
this.d=o || document; 
return this.d.getElementsByTagName(s); 
}; 
$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围 
return document.getElementsByName(s); 
};
Javascript 相关文章推荐
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
JS getStyle获取最终样式函数代码
Apr 01 #Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 #Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 #Javascript
js 异步处理进度条
Apr 01 #Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 #Javascript
You might like
php实现建立多层级目录的方法
2014/07/19 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
档案管理员岗位职责
2013/12/01 职场文书
会议活动邀请函
2014/01/27 职场文书
保险专业自荐信范文
2014/02/20 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
公司借条范本
2015/05/25 职场文书
社会实践心得体会范文
2016/01/14 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技