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

     <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. Odoo权限控制

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9278734.html 一:Odoo中的权限设置主要有以下5种 1)菜单.报表的访问权限 Odoo可以设置菜单项 ...

  2. docker-4-镜像

    是什么 镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件, 它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. 1.UnionFS(联合文件 ...

  3. selenium + python自动化测试unittest框架学习（五）webdriver的二次封装

    因为webdriver的api方法很长,再加上大多数的定位方式是以xpath方式定位,更加让代码看起来超级长,为了使整体的代码看起来整洁,对webdriver进行封装,学习资料来源于虫师的<se ...

  4. UnicodeEncodeError: 'ascii' codec can't encode characters in position 16-22: ordinal not in range(128)

    在python2.7下,将字符串写入到文件时会出现"UnicodeEncodeError: 'ascii' codec can't encode character u'\xa0' in p ...

  5. Tomcat中的Filter

    Filter 节选部分源码.源码版本 Tomcat8.5 说明 filter 是 Servlet 规范 filter 是在 ,执行 Servlet.service方法之前执行 Filter相关接口 p ...

  6. WebRTC博客推荐

    1. http://www.cnblogs.com/lingyunhu/ 2. http://www.jianshu.com/u/eadc7531ecb8

  7. maven install web工程时出错

    [WARNING] Error injecting: org.apache.maven.plugin.war.WarMojo java.lang.NoClassDefFoundError: org/a ...

  8. .gitignore设置不生效

    .gitignore git中,如果想要让git忽略某些文件,或不想push到远程库,不让其受版本的控制.可以使用git提供的.gitignore文件进行配置.像这样: 一般情况下,在文件还未修改前, ...

  9. (Les17 移动数据)expdp/impdp

    oracle 11.2.0 expdp/impdp 数据泵参数   expdp参数=========================================================== ...

  10. 转：SQLServer中的GROUPING,ROLLUP和CUBE

    转自:https://www.cnblogs.com/nikyxxx/archive/2012/11/27/2791001.html 聚集函数:GROUPING 用于汇总数据用的运算符: ROLLUP ...