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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue-ajax小封装实例
Sep 18 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Python入门之后再看点什么好?
2018/03/05 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python错误处理操作示例
2018/07/18 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python创建或生成列表的操作方法
2019/06/19 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python3实现高效的端口扫描
2019/08/31 Python
python实现局域网内实时通信代码
2019/12/22 Python
python如何设置静态变量
2020/09/07 Python
房地产公司工程部经理岗位职责
2015/04/09 职场文书
焦点访谈观后感
2015/06/11 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS