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>

javascript学习笔记5：dom的节点，星星案例2，

1.dom 描述网页各个组成部分之间的关系。

2.星星案例续

猜你喜欢