<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oParent = document.getElementById("list");
var len1 = getByClass("on","list");
alert(len1.length);
var len2 = getByClass("on");
alert(len1.length);
}
function getByClass(clsName, parent){
//定义函数getByClass()实现获取document或指定父元素下所有class为on的元素
var oClass = parent.getElementsByTagName("*");
var boxArr = new Array();
for(var i =0;i<oClass.length;i++){
if(oClass[i].className == clsName){
boxArr.push(oClass[i]);
}
return boxArr;
}
}
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>class为on的p标签</p>
</body>
</html>
我能发现的问题都在图里,本地测试ok了,你可以改改试试
1、getByClass(clsName,parent)函数里的parent参数是元素的ID,而不是元素本身,所以应该通过document.getElementById(parent),先定位到这个元素,然后再getElementsByTagName(clsName)获取元素下所有的子元素。
2、就是首先要判断参数parent是否存在,如果存在,就用document.getElementById(parent)定位元素,如果不存在,就document.body定位全局。用三目运算判断比较快捷一些,写法如下var oClass=(parent?document.getElementById(parent):document.body).getElementsByTagName(clsName)
3、你的 return boxArr;写在了for循环里面,导致循环只执行一次就跳出函数了,也就是只判断了第一个子元素的class是不是on。所以应该return boxArr;写在getByClass(clsName,parent)函数的最后一句,因为执行了return语句,函数就跳出了,return后面的任何语句都不会再执行。
4、你的body里也没给任何元素添加名称为on的class类。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
<!--var oParent = document.getElementById("list");-->
var len1 = getByClass("on","list");
alert(len1.length);
var len2 = getByClass("on");
alert(len2.length);
}
function getByClass(clsName,parent){
//定义函数getByClass()实现获取document或指定父元素下所有class为on的元素
var oParent=parent?document.getElementById(parent):document,
oClass = oParent.getElementsByTagName('*');
var boxArr = new Array();
for(var i=0;i<oClass.length;i++){
if(oClass[i].className==clsName){
boxArr.push(oClass[i]);
}
}
return boxArr;
}
</script>
</head>
<body>
<ul id="list">
<li class="on">1</li>
<li class="on">2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="on">class为on的p标签</p>
</body>
</html>
大兄弟你这个问题比较多啊,上面是我根据你的改的,你对比着学习一下吧
var len1 = getByClass("on","list");
alert(len1.length);
var len2 = getByClass("on");
alert(len1.length);
将len1改为len2!再将参数里的引号改为英文引号即可!
return boxArr; 往外挪一层,遍历完了再返回
var len1 = getByClass("on","list");
这句应该是
var len1 = getByClass("on",oParent);
<script type="text/javascript">
window.onload=function(){
var oParent = document.getElementById("list");
var len1 = getByClass("on","list");
alert(len1.length);
var len2 = getByClass("on");
//弹出len2的长度
alert(len2.length);
}
function getByClass(clsName, parent){
//定义函数getByClass()实现获取document或指定父元素下所有class为on的元素
//先判断parent是否存在
if(parent){
var oClass = ducument.getElementById(parent).getElementsByTagName("*");
}else{
var oClass = document.getElementsByTagName("*");
}
var boxArr = new Array();
for(var i =0;i<oClass.length;i++){
if(oClass[i].className == clsName){
boxArr.push(oClass[i]);
}
return boxArr;
}
}
</script>