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

     <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. 5、Web Service-整合CXF

    1.工程准备 继续使用之前的服务端:https://www.cnblogs.com/Mrchengs/p/10562458.html 2.jar准备 前去apache官网下载响应的jar:http:/ ...

  2. MyBatis(1)-简单入门

    简介 什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.My ...

  3. ServletContextListener在Springboot中的使用

    ServletContextListener是servlet容器中的一个API接口, 它用来监听ServletContext的生命周期,也就是相当于用来监听Web应用的生命周期.今天我们就来说说如何在 ...

  4. CDN的作用与基本过程

     转载请注明出处: leehao.me 或 https://blog.csdn.net/lihao21/article/details/52808747 简介 CDN,Content Distribu ...

  5. uboot 移植 要点

    1.第一 首先要  学会 shell 语法   比如 变量的 概念 变量的使用 ,if 语法  ,以及简单 IF 语法(与 或预算),以及  while for 循环 等等语法,才能看得懂 uboot ...

  6. 程序猿，你为什么须要一台mac？

    用了Mac ,我再也回不去Windows. A:帅哥,我电脑坏了. B:重装系统吧.包好! 重装系统 windows系统解决全部系统问题的一剂神药.Mac 时代再也不须要做这种劳命伤財的事情了,没有什 ...

  7. Linux Shell常用技巧(十二)

    二十三. Bash Shell编程:  1.  读取用户变量:    read命令是用于从终端或者文件中读取输入的内建命令,read命令读取整行输入,每行末尾的换行符不被读入.在read命令后面,如果 ...

  8. 查看mysql的安装目录

    如果忘记了MySQL的安装目录,怎么快速找到呢?方法或许很多,作者觉得这种最方便了 环境:windows+mysql+navicat 方法:进入mysql命令行输入:show variables li ...

  9. MySQL初体验--安装MySQL

    操作系统版本:redhat 6.7 64位 [root@mysql ~]# cat /etc/redhat-release Red Hat Enterprise Linux Server releas ...

  10. Mac python3连接mysql

    Mac python3连接mysql 安装方法1: 1.pip3 install --upgrade pip //升级pip版本 2.sudo python3 /Library/Frameworks/ ...