义函数
getElementsByClassName()是HTML5 新增的DOM API。IE8以下不⽀持搜索。
getElementByClassName()函数的使⽤⽅法：
使⽤JavaScript访问DOM的⼀个重⼤问题是，此过程需要⼀种通过元素类名称来选择类的类函数，对DOMContentReady，这种类函数的缺失导致开发⼈员需要⾃⼰编写⾃定义脚本业执⾏上述任务，许多这个类脚本都是围绕着getElementByClassName()建⽴的，这种解决⽅法在HTML5中被标准化，另外，这种⽅法还本地存在于现代浏览器中,GetElementByClassName()只使⽤⼀个字符串值作为输⼊.并返回⼀个Nodelist，这个NodeList包含所有类名称匹配这个字符串值的元素:
var el = ElementsByClassName('foo');
通过在字符串中使⽤空格分隔类，也可以匹配多个类，下⾯的代码挑选出了所有既拥有foo类名称⼜拥有bar类名称的元素:
var el = ElementsByClassName('foo bar');
W3C没有getElementByClassName这个函数，我们可以⾃⼰定义⼀个函数来模拟它。
⼀般如下⼏种⽅法：
1、要不就是使⽤jquery来实现
2、通过⾃定义函数解决
class单个时如class="test"
function getElementsByClassName (className) {
var all = document.all ? document.all : ElementsByTagName('*');
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=ElementById("parent"):document;
var ElementsByTagName("*");
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 : ElementsByTagName('*');
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];
html document是什么
break;
}
}
}
return elements;
}
下⾯再附⼀个完整的测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*JS写getElementByClassName;
我发现chorm、firefox、ie都⽀持ElementsByClassName */      load = function(){
var adom = ElementsByClassName('a1');
for(var i = 0;i<adom.length;i++)
adom[i].style.backgroundColor="red";
};
function getElementByClassName(className){
var elems = [];
if(!ElementsByClassName){
alert("no exit");
var dom = ElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = ElementsByClassName(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>
效果如图所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。