先上代码，大家贴入看一下

     <body>

         <select id="slc" size="7"></select>

         <input type="submit" id="btn1" value="转换" />

         <input type="text" id="text" />

         <input type="button" id="btn2" value="移除" />

     </body>

CSS

         <style type="text/css">

             #slc {

                 /*float:left;*/

                 width: 500px;

                 height: 200px;

                 /*background-color:red;*/

                 border: 1px solid red;

             }

             #btn1 {

                 /*float:left;*/

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 100px;

                 height: 40px;

                 background-color: red;

             }

             #text {

                 /*float:left;*/

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 300px;

                 height: 40px;

             }

             #btn2{

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 100px;

                 height: 40px;

                 background-color: red;

             }

         </style>

JS

 <script>

     var x = document.getElementById("slc");

     var y = document.getElementById("btn1");

     var z = document.getElementById("text");

     var a = document.getElementById("btn2");

     y.onclick = function() {

         x.innerHTML += "<option>" + z.value + "</option>";

         //        x.value = z.value;

         z.value = "";

     }

     a.onclick=function(){

         x.removeChild(x.selectedOptions[0]);

     }

 </script>

左移效果图

点击转换后

点击移除后

OK   现在咱们开始讲解下这个功能

在很多的娱乐网站上注册账户的时候，会有一个爱好或者是巴拉巴拉选项让你选择，选择后点击某个按钮，实现左右互动互易的功能

那今天咱们就来用基本的DOM操作来实现这个功能

中间的CSS咱们就不讲了，属于前面的基础部分了

OK，简单的逻辑思维咱们一定要具备

首先咱们看到的红色边框，咱们第一时间想到的应该是<select></select>标记，里面放的是<option></option>

PASS:在这里一定要把前面HTML中的标记回忆起来，这个阶段结束后的项目，大家还会用得到，并且在以后的工作中也有可能用到，

　　    既然学过去，咱们就有必要去记住，并且去灵活的运用起来，就像打字时间久了不需要看键盘一样，

　　    不会用、用的不熟，这都是敲的不够多，

　　    在搬砖的过程中一定不要使用辅助工具，比如说软件上的提醒功能，

　　    练习的目的就是熟能生巧，切记！勿忘！！！

OK，左边各是一个select（在这里就用select代替<select></select>,下同），两个button，一个text

在这里咱们给四个标记设置属性一定别忘了id这个属性，

通过id咱们可以设置其样式，最关键的是咱们需要用id去取值

上面有全部的代码，咱们就这么手敲吧，看不懂的上翻

先来第一个select取值

var slc_1 = getElementById("id的值");

那么现在咱们定义的这个变量X就是变成了一个集合，因为select里面放的并不是一个数字或者是一个字符串，而是很多组

text、btn_1、btn_2同理，不去赘述

现在咱们开始用咱们的逻辑思维去想一下，点击转换按钮可以实现在text中输入的字符串移入到左边的select中

也就是说select.value等于text.value，那是不是text.value=" ";也就可以实现视觉上的消失？

实践是真理之母

咱们尝试一下便可以，答案是true

记然咱们说select中相当于一个数组，那咱们暂时先去尝试一下数组当中的[0]，

其实这样是可以的，因为每次移入和移除都是只能选择一个，所以咱们没有必要再去给移入和移除再次定义一个数组，用[0]就可以，

所以这里的[0]就是咱们选中的那个字符串，这一点大家一定要理解清楚

至于option，还不知道什么意思或者是这行代码x.innerHTML += "<option>" + z.value + "</option>";还有不知道什么意思的，请前翻前面课本，还不知道的去度娘哪里回炉

咳咳，很简单的一个逻辑，分层剖析，确实很乏味

PASS：目前咱们接触的计算机语言就是用最直观有效的方式去进行人机沟通，从而为人进行更好的服务

　　　　多去做一些尝试性的拓展或者是熟练性的练习，对代码的了解和编程认知可以有一个更好的提升

　　　　当代码量和熟练度到了一定的程度，那对编程的认知和后期的学习都会有一个质的升华

　　　　同样都是单身狗，没事儿多敲敲代码，多有意思的一件事，更何况敲代码得到的对象可比你千辛万苦追的对象要更符合你，哈哈

好了，今儿先到这里，板书的不是特别的清晰，这个题逻辑层面还有不懂的可以留言

咱们下期再见

DOM练手讲解的更多相关文章

  1. 10个有趣的Python教程，附视频讲解+练手项目。

    从前的日色变得慢,车.马.邮件都慢 一生只够爱一门编程语言 从前的教程也好看,画面精美有样子 你看了,立马就懂了 Python最性感的地方,就在于它的趣味性和前沿性,学习Python,你总能像科技节的 ...

  2. webpack练手项目之easySlide（一）：初探webpack （转）

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  3. webpack练手项目之easySlide（一）：初探webpack

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  4. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  5. webpack练手项目之easySlide（三）：commonChunks（转）

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

  6. webpack练手项目之easySlide（二）：代码分割（转）

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  7. Python之路【第二十四篇】：Python学习路径及练手项目合集

      Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...

  8. Java学习路径及练手项目合集

    Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 实验楼上的[Java 学习路径]中将首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE ...

  9. webpack练手项目之easySlide（三）：commonChunks

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

随机推荐

  1. [Noip2007]Core树网的核

    嘟嘟嘟 首先求树的直径两次bfs即可,实际上bfs就是最短路,因为树上路径是唯一的,所以用任何一种遍历方法都行(spfa和dijkstra当然也可以). 可以证明,只要求出任意一条直径就行了,为什么呢 ...

  2. 《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学

    五.社工工程学     5.1社会工程系框架          5.1.1信息搜集                 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时 ...

  3. 使用iptables和tc对端口限速

    首先,我们来看一下tc,TC(Traffic Control)命令,是linux自带的告警流控命令.Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制, ...

  4. IIS中ASP.NET虚拟目录不继承主站点web.config设置的办法（转载）

    ASP.NET提供了强大的Web.config来配置网站,一般来说一个网站只有一个根目录下的Web.config文件,有时候我们希望子目录有着不同的权限或者参数设置,则可以在相应子目录增加一个Web. ...

  5. ArcMap中用python的split方法提取字段的值

    提取PROPERTY_L字段空格分隔符前面的地址编号 提取前:5105 ABERDEEN LANE 提取后:5105 提取的表达式:!PROPERTY_L!.split(" ")[ ...

  6. Oracle11g 行列转换函数PIVOT and UNPIVOT

    作为Oracle开发工程师,推荐大伙看看 PIVOT and UNPIVOT Operators in Oracle Database 11g Release 1 This article shows ...

  7. standby_file_management 参数为manual 导致ORA-01111问题

    情景: Dataguard 物理备库执行恢复报错: Errors in file /home/u01/app/diag/rdbms/rzorcl11g/ORCL/trace/ORCL_pr00_358 ...

  8. 在Swift中使用AutoLayout-VFL(AutoLayout-VFL笔记)

    1.背景 iOS开发这几年, UI布局工具从frame到Masonry到SnapKit, sb和xib的AutoLayout也用过, 但是代码版本的AutoLayout倒是没用过, 最近一年, 频频发 ...

  9. 【Java项目】GUI图形用户界面（不断更新中！）

    <目录> 1 创建一个简单的窗体 2 如何进行事件监听 (1) 按钮监听 (2) 键盘监听 (3) 鼠标监听 3 容器 (1) 创建一个简单的对话框 (2) 创建一个简单的模态对话框 (3 ...

  10. activemq的高级特性：集群实战

    高级特性实战需求 当消费端是多个集群,集群A又包含多个服务. 当每个集群都要接受相同的一批消息,而集群内的每个服务都去分摊消息. 解决办法一:级联 增加一个中转者.但是不是特别的优化,而且性能也不是特 ...