js document.getElementsByClassName的使用介绍与自定义函数
getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。
getElementByClassName()函数的使用方法：
使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,GetElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:
var el = document.getElementsByClassName('foo');
通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
var el = document.getElementsByClassName('foo bar');
W3C没有getElementByClassName这个函数，我们可以自己定义一个函数来模拟它。
一般如下几种方法：
1、要不就是使用jquery来实现
2、通过自定义函数解决
class单个时 如class="test"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
if (all[e].className == className) {
elements[elements.length] = all[e];
break;
}
}
return elements;
}
代码二、
function getElementsByClassName(className,parent){
var oParent=parent?document.getElementById("parent"):document;
var oLis=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<oLis.length;i++){
if(oLis[i].className==className){
arr.push(oLis[i])
};
return arr;
}
};
class有多个的时候同样匹配,如class="test1 test2 test3"
function getElementsByClassName (className) {
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++) {
var classList = all[e].className.split(" ");
for(var i=0;i<classList.length;i++){
if (classList[i] == className) {
elements[elements.length] = all[e];
break;
}
}
}
return elements;
}
下面再附一个完整的测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*JS写getElementByClassName;
我发现chorm、firefox、ie都支持document.getElementsByClassName */
window.onload = function(){
var adom = document.getElementsByClassName('a1');
for(var i = 0;i<adom.length;i++)
adom[i].style.backgroundColor="red";
};
function getElementByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
alert("no exit");
var dom = document.getElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = document.getElementsByClassName(className);
alert('exit');
}
return elems;
}
</script>
</head>
<body>
<div id="a1">a1</div>
<div class="a1">a1</div>
<div class="a1">a1</div>
<div id="a1">a1</div>
<div class="a1">a1</div>
</body>
</html>
效果如图所示：
相关文章
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
这篇文章主要介绍了javascript字符串对象常用api函数,结合实例形式总结分析了javascript常用的连接、替换、分割、转换等相关函数与使用方法,需要的朋友可以参考下2016-09-09
这篇文章主要教大家如何简单实现js悬浮导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料，激活了所有接口支持浏览器跨域请求的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
在VSCode中编写的TypeScript代码不能直接运行,需要先用tsc编译为JavaScript,然后才能运行,下面这篇文章主要给大家介绍了关于如何在vscode中使用Typescript并运行的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JS实现的碰撞检测与周期移动,结合完整实例形式分析了javascript结合时间函数的页面元素属性动态操作及事件响应相关使用技巧,需要的朋友可以参考下2019-09-09
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
这篇文章主要介绍了JavaScript实现的DOM树遍历方法,结合实例形式详细分析了二叉DOM树、多叉DOM树的前序、中序与后序遍历,以及多叉树深度优先、广度优先等相关遍历操作实现技巧,需要的朋友可以参考下2018-05-05
JavaScript报错：Uncaught ReferenceError: XYZ is&
在 JavaScript 编程中,“Uncaught ReferenceError: XYZ is not defined” 是一种常见的错误,这种错误通常发生在试图使用一个未声明的变量或标识符时,故本文给大家介绍了JavaScript报错：Uncaught ReferenceError: XYZ is not defined的解决方法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了JS实现图片局部放大或缩小的方法,涉及javascript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JS实现的定时器展示简单秒表、页面弹框及跳转操作,结合实例形式分析了JavaScript时间函数及页面元素动态操作相关使用技巧,需要的朋友可以参考下2020-01-01
JavaScript中的字符串就是用''或""括起来的字符表示。下面通过本文给大家介绍JavaScript字符串的相关知识，感兴趣的朋友一起看看吧2017-06-06
最新评论