获得div盒子之下的所有<Li>元素
这样可以获取指定DIV下的全部LI元素
var oLi=document.getElementById("Div1").getElementsByTagName("li");
alert(oLi.length);
这样你就可以输出你获取到多少个LI
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body,div,ul,li,span{margin:0;padding:0;}
#div1{width:200px;height:300px;
border:1px solid red;
margin:100px auto;}
ul{width:200px;height:300px;
}
li{width:200px;height:25px;
list-style-type:none;
font-size:12px;
overflow:hidden;
margin:7px 0px;
background-color:#B5B4B6;}
span{float:left;}
.span1{display:none;}
em{float:left;display:block;
line-height:25px;
font-family:黑体;
font-style:normal;
margin-left:19px;}
.lib{width:200px;height:50px;
border:1px solid #7AE4FC;
list-style-type:none;
font-size:12px;
overflow:hidden;}
.span1b{float:left;
display:block;
margin-top:8px;}
.emb{float:left;display:block;
line-height:25px;
font-family:黑体;
font-style:normal;
margin-left:10px;}
</style>
</head>
<body οnlοad="test1(this)">
<div id="div1">
<ul>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
<li>hello!</li>
</ul>
</div>
</body>
<script type="text/javascript">
function test1(k){
var i = k;
alert(i);
var q = document.getElementById("div1");
alert(q);
var myLi = document.getElementsByTagName("li");
alert(myLi);
}
/*function test1(){
for (var i=0;i<lis.length ;i++ )
{
lis[i].οnmοuseοver=test2;
}
}
function test2(){ for (var i=0;i<lis.length ;i++ )
{
if (this==lis[i])
{
lis[i].className="lib";
span1[i].className="span1b";
ems[i].className="emb";
}
else{lis[i].className="";
span1[i].className="span1";
ems[i].className="";
}
}
}*/
</script>
</html>
本段代码可以分别显示几个对象的种类
分别是:
window对象
HTMLDivElement对象
HTMLCollection对象