【JavaScript】纯js获取元素-小案例：简易对话

案例1：效果

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>添加对话</title>
 6     <style type="text/css">
 7         body,ul,p{margin: 0;padding: 0;}
 8         ul{list-style: none;}
 9         img{border: 0; vertical-align: middle;}
10         .box{
11             float: left;
12             width: 400px;
13             margin: 50px;
14             border: 2px solid black;
15         }
16         .box .title{
17             position: relative;
18             width: 100%;
19             height: 30px;
20             background-color: black;
21             line-height: 30px;
22             color: white;
23         }
24         .box .title #btn{
25             position: absolute;
26             right: 10px;
27             background: none;
28             border: 0;
29             font-size: 25px;
30             color: white;
31             cursor: pointer;
32         }
33         .box .title span{
34             margin: 0 10px;
35         }
36         .box .title #conin{
37             vertical-align: middle;
38         }
39         .box .title #add{
40             background-color: orange;
41             border: 0;
42             color: white;
43             cursor: pointer;
44             vertical-align: middle;
45         }
46         .box .title #textbox{
47             display: none;
48             /*display: inline-block;*/
49         }
50         .box ul p{
51             margin: 0 10px;
52             padding: 2px 0;
53             border-bottom: 1px solid #eee;
54             font-size: 14px;
55         }
56     </style>
57 </head>
58 <body>
59    <div class="box">
60        <div class="title">
61            <span>最新动态</span>
62            <div id="textbox">
63                 <input type="text" id="conin" class="conin" />
64                 <input type="button" id="add" value="添加" />
65            </div>
66            <button title="新建" id="btn" >+</button>
67        </div>
68        <ul id="body">
69        </ul>
70    </div>
71    <script type="text/javascript">
72    //box
73         var Otxtbox = document.getElementById("textbox");
74         var Oin = document.getElementById("conin");
75         var Oadd = document.getElementById("add");
76 
77         var Obtn = document.getElementById("btn");
78 
79         var Obody = document.getElementById("body");
80         //显示输入框
81         Obtn.onclick = function(){
82             Otxtbox.style.display = "inline-block";
83         };
84         //新建li，清空输入框
85         Oadd.onclick = function(){
86             var txt = Oin.value;
87             if(txt){
88                 Obody.innerHTML += "<li><p>" + txt + "</p></li>";
89                 Oin.value = "";
90             }else{
91                 alert("请输入！");
92             }
93         };
94    </script>
95 </body>
96 </html>

View Code

原理：

这里有两个点击事件，首先看第一个：点击+号显示输入框；

1、获取+这个元素，id为btn，同时获取输入框，id为textbox；给btn添加onclick事件，事件直接控制输入框的样式display即可。

2、获取添加按钮，id为add，给按钮添加onclick事件，点击新增列表项，依次添加到列表ul的innerHTML中即可。列表项中的文字用输入框内的value值代替。

案例2：效果

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加对话</title>
    <style type="text/css">
        body,ul,p{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{border: 0; vertical-align: middle;}
        .box2{
            float: left;
            width: 300px;
            margin: 50px;
        }
        .box2 .top{
            width: 100%;
            height: 100px;
            padding: 10px;
            background-color: #ddd;
            border-radius: 4px;
        }
        .box2 .top .txt{
            height: 60px;
            width: 98%;
            margin-bottom: 10px;
            resize: none;
        }
        .box2 .top span{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url("images/emoji3.png") no-repeat center center/cover;
            cursor: pointer;
        }
        .box2 .top span.other{
            background:url("images/emoji1.png") no-repeat center center/cover;
        }
        .box2 .top .send{
            float: right;
            padding: 2px 15px;
            background-color: orange;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .box2 ul li{
            margin-top: 10px;
            padding-bottom: 2px;
            border-bottom: 1px solid #eee;
        }
        .box2 ul li img{
            width: 25px;
            height: 25px;
        }
        .box2 ul li span{
            vertical-align: middle;
            font-size: 14px;
        }
    </style>
</head>
<body>
   <div class="box2">
       <div class="top">
           <textarea class="txt" id="txt"></textarea>
           <span id="photo"></span>
           <input type="button" value="发送" class="send" id="send"/>
       </div>
       <ul id="messages">
       </ul>
   </div>
   <script type="text/javascript">
    //box2
        var Otxt = document.getElementById("txt");
        var Osend = document.getElementById("send");
        var Omes = document.getElementById("messages");

        var Ophoto = document.getElementById("photo");
        //图片路径数组
        var aImg = ["images/emoji1.png","images/emoji3.png"];
        //记录当前图片
        var nNum = 1;

        //图片切换
        Ophoto.onclick = function(){
            if(nNum){
                nNum--;
                this.setAttribute("class", "other");
            }else{
                nNum++;
                this.removeAttribute('class');
            }
        }
        //新增消息列表项li
        Osend.onclick = function(){
            if(Otxt.value){
                Omes.innerHTML += "<li><img src='" + aImg[nNum] + "' alt='images'/><span>"
                 + Otxt.value + "</span></li>";
                Otxt.value = "";
            }else{
                alert("请输入信息！");
            }
        }
   </script>
</body>
</html>

View Code

原理：

页面中两个出发事件都为点击事件：

1、点击发送按钮，给ul添加列表项li，其中图片为当前输入框中的图片，文本为输入框中的value；

2、输入框中图片点击切换，采用给不同样式设置不同背景图片，用js更改class名称来实现。

3、采用计数器来记录当前图片号num，将图片路径存储到一个数组中，每次切换图片的时候更改num值。新建列表项时用num来取当前图片。

注意：

　　　获取元素时：

　　　 * ID获取时，前缀必须是 document.
* 其他方法获取时，前缀可以是某一个节点对象，表明不是从所有节点里面找，而是只从该节点子元素里面找，节省资源。

通过ID获取
document.getElementById()

            通过class获取，不兼容IE8及以下
                .getElementsByClassName()
                获取的是个类数组（类似于数组，可以用下标，可以用.length）

            通过标签名获取
                .getElementsByTagName()
                获取的是个类数组

            通过 name 获取
                .getElementsByName()
                获取的是个类数组

            通过选择器找，不兼容IE7及以下
                .querySelector()       直接获取单个节点对象
                .querySelectorAll()    获取类数组