练习；
要求：界面上有个登录按钮，点击登录的时候，界面中弹出一个登录的方框，点击登录方框中的×的，登录方框消失。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link href="../css/lianxi1.css" rel="stylesheet">-->
<!--<script src="../js/lianxi1.js" type="text/javascript"></script>-->
<style>
#div{
width: 300px;
height: 210px;
border: 1px red solid;
margin-top: 100px;
margin-left: 100px;
position: absolute;
display: none; }
#div1{
width: 30px;
height: 20px;
border: 1px red solid;
background-color: #C2776B;
margin-left: 270px;
line-height: 20px;
text-align: center;
} button{
margin: 50px;
}
</style>
<script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
var div=document.getElementById('div');
var div1=document.getElementById('div1'); bnt.onclick=function(){
div.style.display='block';
};
div1.onmouseover=function(){//鼠标移入时
div1.style.cursor='pointer';
div1.style.backgroundColor='red';
};
div1.onmouseout=function(){//鼠标移出时
div1.style.backgroundColor='#C2776B';
};
div1.onclick=function(){
div.style.display='none';
};
};
</script>
</head>
<body>
<button>登录</button>
<div id="div"> <div id="div1">×</div><br/>
用户名：<input type="text" id="one"/><br/><br/><br/>
密 码：<input type="password" id="two"/><br/>
<button>登录</button>
<button>取消</button>
</div>
</body>
</html>
要求：有一个写评论的方框，点击评价的时候，评论语从上往下放置，点击删除的时候，评论语从下往上删除；（创建节点，添加节点，删除节点）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<script src="../js/lianxi2.js" type="text/javascript"></script>-->
<script>
/**
* Created by acer on 2015/9/10.
*/
window.onload=function(){
function $(id){
return document.getElementById(id);
} var text=$('text');//评价的内容
var bnt=$('bnt');//评价
var bnt1=$('bnt1');//删除
var btt=$('btt');//评论语放在下面的一个div中 bnt.onclick=function(){
var conent=text.value;
if(conent!=''){
p1=document.createElement('p');//创建节点
p1.innerHTML=conent;
btt.insertBefore(p1,btt.firstChild);//在btt.firstChild之前插入p1
text.value='';
}else{
alert('您还没写评价呢！')
} };
bnt1.onclick=function(){
if(btt.childNodes.length>0){
btt.removeChild(btt.lastChild);//删除节点
}else{
alert('您没有评语可以删除的！')
}
}; };
</script>
</head>
<body>
<textarea name="text1" id="text" cols="30" rows="10"></textarea>
<button id="bnt">评价</button>
<button id="bnt1">删除</button>
<div id="btt"></div>
</body>
</html>
要求：有三个按钮，点击哪个按钮，这个div就显示成那个按钮的颜色；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<script src="../js/lianxi3.js" type="text/javascript"></script>-->
<script>
/**
* Created by acer on 2015/9/10.
*/
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var div1=$('div');
var bnt1=$('red');
var bnt2=$('green');
var bnt3=$('blue'); bnt1.onclick=function(){
div1.style.backgroundColor='red';
};
bnt2.onclick=function(){
div1.style.backgroundColor='green';
};
bnt3.onclick=function(){
div1.style.backgroundColor='blue';
};
}; </script>
</head>
<body>
<h1>请选择您的颜色</h1>
<div id="div" style="width:700px;height: 700px;">
<button id="red">红色</button>
<button id="green">绿色</button>
<button id="blue">蓝色</button>
</div>
</body>
</html>
要求：超简单的QQ发送消息那样
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="../css/QQ.css">-->
<!--<script type="text/javascript" src="../js/QQ.js"></script>-->
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 390px;
height: 300px;
border: 1px blue solid;
margin: 100px;
background-color: aqua;
position: absolute;
}
.left{
left:400px;
} input{
width: 300px;
height: 20px;
position: absolute; }
.leftin{
top :420px;
left: 100px;
}
.rightin{
top:420px;
left: 500px;
}
button{
position: absolute;
}
.leftsend{
top:420px;
left: 430px;
}
.rightsend{
top:420px;
left: 830px;
}
.lp{
left: 140px;
top:70px;
color:blueviolet;
font-size: 24px; }
.rp{
left: 540px;
top:70px;
color:blueviolet;
font-size: 24px;
} </style> <script>
/**
* Created by acer on 2015/9/10.
*/ window.onload=function(){
var ldiv=document.getElementsByTagName('div')[0];
var rdiv=document.getElementsByTagName('div')[1];
var ltext=document.getElementsByTagName('input')[0];
var rtext=document.getElementsByTagName('input')[1];
var lbnt=document.getElementsByTagName('button')[0];
var rbnt=document.getElementsByTagName('button')[1]; lbnt.onclick=function(){
var lcontent=ltext.value;
if(lcontent!=''){
var rh=document.createElement('h3');
rh.innerHTML='我：';
var rp=document.createElement('p');
rp.innerHTML='<br/>'+lcontent; rdiv.appendChild(rh);
rdiv.appendChild(rp); var lh=document.createElement('h3');
lh.innerHTML='hellokitty燕 ：';
var lp=document.createElement('p');
lp.innerHTML='<br/>'+lcontent; ldiv.appendChild(lh);
ldiv.appendChild(lp); ltext.value=""; }
else{
alert('消息不为空！！');
} };
rbnt.onclick=function(){
var rcontent=rtext.value;
if(rcontent!=''){
var lh=document.createElement('h3');
var rh=document.createElement('h3');
var lp=document.createElement('p');
var rp=document.createElement('p'); lh.innerHTML='*hellokitty燕：';
lp.innerHTML="<br/>"+rcontent;
rh.innerHTML='*我：';
rp.innerHTML="<br/>"+rcontent;
ldiv.appendChild(rh);
rdiv.appendChild(lh);
ldiv.appendChild(rp);
rdiv.appendChild(lp);
rtext.value=""; } else{
alert('消息不为空！！');
} } };
</script>
</head>
<body> <div class="left">hellok燕</div>
<div class="right">我</div>
<input type="text" class="leftin"/>
<button class="leftsend">发送</button> <input type="text" class="rightin"/>
<button class="rightsend">发送</button> </body>
</html>
节点类型常量和值（长使用的）
元素类型 NodeType nodeName nodeValue
元素 1 元素标签 null
属性 2 属性的名字 属性的值
文本 3 #test 文本值
注释 8 #comment 注释的值
文档 9 #document null