Js中如何获取div盒子之下的元素（简单的例子）

来源：互联网发布：怎么下载网站数据库编辑：程序博客网时间：2024/06/05 11:01

获得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 onload="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].onmouseover=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对象

1 0