文档对象模型DOM(二)

练习；

要求：界面上有个登录按钮，点击登录的时候，界面中弹出一个登录的方框，点击登录方框中的×的，登录方框消失。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <!--<link href="../css/lianxi1.css" rel="stylesheet">-->
 7     <!--<script src="../js/lianxi1.js" type="text/javascript"></script>-->
 8     <style>
 9         #div{
10             width: 300px;
11             height: 210px;
12             border: 1px red solid;
13             margin-top: 100px;
14             margin-left: 100px;
15             position: absolute;
16             display: none;
17 
18         }
19         #div1{
20             width: 30px;
21             height: 20px;
22             border: 1px red solid;
23             background-color: #C2776B;
24             margin-left: 270px;
25             line-height: 20px;
26             text-align: center;
27         }
28 
29         button{
30             margin: 50px;
31         }
32     </style>
33     <script>
34         window.onload=function(){
35             var bnt=document.getElementsByTagName('button')[0];
36             var div=document.getElementById('div');
37             var div1=document.getElementById('div1');
38 
39 
40             bnt.onclick=function(){
41                 div.style.display='block';
42             };
43             div1.onmouseover=function(){//鼠标移入时
44                 div1.style.cursor='pointer';
45                 div1.style.backgroundColor='red';
46             };
47             div1.onmouseout=function(){//鼠标移出时
48                 div1.style.backgroundColor='#C2776B';
49             };
50             div1.onclick=function(){
51                 div.style.display='none';
52             };
53         };
54     </script>
55 </head>
56 <body>
57 <button>登录</button>
58 <div id="div">
59 
60     <div id="div1">×</div><br/>
61     &nbsp;&nbsp;用户名：<input type="text" id="one"/><br/><br/><br/>
62     &nbsp;&nbsp;密&nbsp;&nbsp;码：<input type="password" id="two"/><br/>
63     <button>登录</button>
64     <button>取消</button>
65 </div>
66 </body>
67 </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="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