1.dom 描述网页各个组成部分之间的关系。
注:火狐浏览器中空白处也算一个节点
在 XML DOM 中,节点的关系被定义为节点的属性:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
下面的图像展示了 books.xml 中节点树的一个部分,并说明了节点之间的关系:
dom节点练习:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(){
var obj=document.getElementById("div1");
//obj.parentNode.style.background="red";
//注意火狐中空白处也是一个节点
// obj.nextSibling.nextSibling.style.background="blue";
//obj.previousSibling.previousSibling.style.background="blue";
//obj.parentNode.nextSibling.nextSibling.style.background="red";
//第一个子节点其实是空白,所以还要加一个nextSibling。lastChild同理
//obj.firstChild.nextSibling.style.background="blue";
//childNodes返回的是子节点数组
obj.childNodes[1].style.background="red";
}
</script>
</head>
<body >
<div>
<p>段落</p>
<div id="div1">这是<p>段落2</p><p>duanluo3</p>div</div>
<a>链接1</a>
</div>
<div><a>链接2</a>asjkghas;jkh</div>
<input type="button" value="点击" onclick="fn()">
</body>
</html>
2.星星案例续
1.网页打开之后随机大小,随机位置出现星星
<!DOCTYPE html>
<html onclick="star(event)">
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=init;
//让页面出现星星
function init(){
window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
document.body.appendChild(obj);
}
</script>
</head>
<body >
</body>
</html>
2.点星星让其消失
绑定一个onclick事件,obj.onclick=abcd; 对象.事件=事件处理函数;
removeChild(obj);删除节点,注意:1.要想删除一个节点,必须通过它的父节点 2.绑定事件中,this可以直接使用
<!DOCTYPE html>
<html onclick="star(event)">
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=init;
//让页面出现星星
function init(e){
window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
//绑定onclick事件
obj.onclick=removeStar;
document.body.appendChild(obj);
}
function removeStar(){
this.parentNode.removeChild(this);
}
</script>
</head>
<body >
</body>
</html>
3游戏功能添加:开始游戏、暂停游戏
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
// window.onload=init;
//让页面出现星星
function startGame(){
window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
//绑定onclick事件
obj.onclick=removeStar;
document.body.appendChild(obj);
}
function removeStar(){
this.parentNode.removeChild(this);
}
function zantingGame(){
alert("暂停游戏");
}
</script>
</head>
<body >
<input type="button" value ="开始游戏" onclick="startGame()"/>
<input type="button" value ="暂停游戏" onclick="zantingGame()"/>
</body>
</html>
4、游戏结束
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
// window.onload=init;
var timeout;
var count=0;
//让页面出现星星
function startGame(){
timeout=window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
//绑定onclick事件
obj.onclick=removeStar;
document.body.appendChild(obj);
count++;
if(count>=20){alert("游戏结束");
window.clearInterval(timeout);
location.reload();
}
}
function removeStar(){
this.parentNode.removeChild(this);
count--;
}
function zantingGame(){
alert("暂停游戏");
}
</script>
</head>
<body >
<input type="button" value ="开始游戏" onclick="startGame()"/>
<input type="button" value ="暂停游戏" onclick="zantingGame()"/>
</body>
</html>
5.显示游戏时间,修改bug
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
// window.onload=init;
var timeout;//控制星星出现的定时器
var timeout2;//时间定时器
var count=0;//记录星星个数的变量
//让页面出现星星
function startGame(){
window.clearInterval(timeout);
window.clearInterval(timeout2);
timeout2=window.setInterval("shijian()",1000);
timeout=window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
//绑定onclick事件
obj.onclick=removeStar;
document.body.appendChild(obj);
count++;
if(count>=20){alert("游戏结束");
window.clearInterval(timeout);
location.reload();
}
}
function removeStar(){
this.parentNode.removeChild(this);
count--;
}
function zantingGame(){
alert("暂停游戏");
}
var i=0;//记录游戏时间的变量
function shijian(){
var obj=document.getElementById("span1");
i++;
obj.innerHTML="游戏进行了"+i+"秒";
}
</script>
</head>
<body >
<input type="button" value ="开始游戏" onclick="startGame()"/>
<input type="button" value ="暂停游戏" onclick="zantingGame()"/>
<span id="span1">游戏进行了0秒 </span>
</body>
</html>
6 添加游戏进度条的功能
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
#span2 {border:1px solid black;
width:100px;
height:20px;
display:inline-block;}
#span3{
display:inline-block;
background:yellow;
height:20px;
}
</style>
<script type="text/javascript">
// window.onload=init;
var timeout;//控制星星出现的定时器
var timeout2;//时间定时器
var count=0;//记录星星个数的变量
//让页面出现星星
function startGame(){
window.clearInterval(timeout);
window.clearInterval(timeout2);
timeout2=window.setInterval("shijian()",1000);
timeout=window.setInterval("start()",1000);
}
function start(){
var obj=document.createElement("img");
obj.src="xingxing.jpg";
var width =Math.floor(Math.random()*80+20);
obj.width=width;
var x=Math.floor(Math.random()*1160+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=(y+"px");
obj.style.left=(x+"px");
//绑定onclick事件
obj.onclick=removeStar;
document.body.appendChild(obj);
count++;
var obj2=document.getElementById("span3");
obj2.style.width=count*5+"px";
if(count>=20){alert("游戏结束");
window.clearInterval(timeout);
location.reload();
}
}
function removeStar(){
this.parentNode.removeChild(this);
count--;
var obj2=document.getElementById("span3");
obj2.style.width=count*5+"px";
}
function zantingGame(){
alert("暂停游戏");
}
var i=0;//记录游戏时间的变量
function shijian(){
var obj=document.getElementById("span1");
i++;
obj.innerHTML="游戏进行了"+i+"秒";
}
</script>
</head>
<body >
<input type="button" value ="开始游戏" onclick="startGame()"/>
<input type="button" value ="暂停游戏" onclick="zantingGame()"/>
<span id="span1">游戏进行了0秒 </span>
<span id="span2"> <span id="span3"> </span> </span>
</body>
</html>