你的位置:首页 > Java教程

[Java教程]【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 ="http://www.w3.org/1999/xhtml" ="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 //box73   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 ="http://www.w3.org/1999/xhtml" ="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()    获取类数组