1.复选框与按钮的配合使用的DOM操作

<body>
        
        <input type="checkbox" id="ckb1" /><br><br>
        <input type="button" value="下一步" id="btn1" disabled="disabled" />

</body>
        
        <script>
            
            document.getElementById('ckb1').onclick = function(){
            var ckb1 = document.getElementById('ckb1');
            var btn1 = document.getElementById('btn1');
            
            if(ckb1.checked){
                btn1.removeAttribute('disabled');
            }
            else{
                btn1.setAttribute('disabled','');
        }
    }
        </script>

2.下拉列表、文本框与按钮配合使用的DOM操作（两种方法）

<body>

<select id="skd" size="7" style="width: 100px;"></select><br>
        <select id="slt" size="7" style="width: 100px;"></select><br>
        <input type="text" id="ipt2" /><br>
        <input type="text" id="txt" /><br>
        <input type="button" id="btn2"  value="添加"/>
 </body>       
        <script>
            //第一种方法(拼字符串)
            
//            document.getElementById('btn2').onclick = function(){
//                var ipt2= document.getElementById('txt').value;
//                var skd = document.getElementById('skd');
//                skd.innerHTML += "<option>"+ ipt2  +"</option>";
//                document.getElementById('ipt2').value="";
//            }
            
            //第二种方法(造元素)
            
            var txt = document.getElementById('txt');
            var slt = document.getElementById('slt');
            
            document.getElementById('btn2').onclick = function(){    
//            新建一个option对象
            var opt = document.createElement('option');
//            设置option对象的值（指向赋值）
            opt.value = txt.value;
//            设置option对象的内容
            opt.innerHTML = txt.value;
//            添加到slt（名）的对象
            slt.appendChild(opt);
        }

</script>

3.下拉列表与按钮的双向交换效果

<body>
        
        <select id="oldSelect" size="10" multiple="multiple" style="width: 100px;float: left;position: relative">
            <option >北京</option>
            <option >上海</option>
            <option >上海</option>
            <option >深圳</option>
            <option >香港</option>
        </select>
        <select id="newSelect" size="10" multiple="multiple" style="width: 100px;float: left;margin-left: 20px;position: relative;">
            <option >篮球</option>
            <option >游泳</option>
            <option >击剑</option>
            <option >排球</option>
            <option >举重</option>
        </select>
        
        <br><br><br><br><br><br><br><br><br><br>
        
        <input type="button" id="btn1" value="添加到右" style="float: left;"/>
        <input type="button" id="btn2" value="添加到左" style="float: left;margin-left: 50px;"/>
        
        <script>
            
            document.getElementById('btn1').onclick=function(){
                
                var oldSelect = document.getElementById('oldSelect');
                
                    for(var i=0;i<oldSelect.options.length;i++){
                        if(oldSelect.options[i].selected){
                        var newSelect = document.getElementById('newSelect');
                        newSelect.appendChild(oldSelect.options[i]);
                    }
                }
                    alert(oldSelect.options[oldSelect.options.length].value);
            }
            
                document.getElementById('btn2').onclick=function(){
                
                var newSelect = document.getElementById('newSelect');
                
                    for(var i=0;i<newSelect.options.length;i++){
                        if(newSelect.options[i].selected){
                        var oldSelect = document.getElementById('oldSelect');
                        oldSelect.appendChild(newSelect.options[i]);
                    }
                }
                    alert(newSelect.options[newSelect.options.length].value);
            }

</script>

关于JS的DOM操作——重要实例的操作的更多相关文章

  1. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  2. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  3. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  5. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

  6. Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

    此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...

  7. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  8. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

随机推荐

  1. NewsDaoImpl

    package com.pb.news.dao.impl; import java.sql.CallableStatement;import java.sql.Connection;import ja ...

  2. JavaScript+canvas 利用贝塞尔曲线绘制曲线

    效果图: <body> <canvas id="test" width="800" height="300">< ...

  3. 一颗简单的JDBC栗子

    前言:安装好数据库之后,我们编写的java程序是不能直接使用数据库的,而JDBC(Java Database Connectivity,即java数据库连接)是java语言里用来规范客户端程序访问数据 ...

  4. Vulkan Tutorial 28 Depth buffering

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 到目前为止,我们所使用的几何图形为3D,但仍然完全扁平的. ...

  5. 使用TinyXML进行XML操作

    本例基于TinyXML实现XML的自动解析和创建,由于本人是菜鸟刚入门,例子中添加了enum.struct.vector.map.list的常见用法,首先添加6个tinyxml工程文件,然后设置调试参 ...

  6. PHP中json_encode与json_decode

    一.json_encode() 对变量进行JSON编码, 语法: json_encode ( $value [, $options = 0 ] ) 注意:1.$value为要编码的值,且该函数只对UT ...

  7. ARM开发（1） 基于STM32的LED跑马灯

    一 跑马灯原理:  1.1 本实验实现2个led的跑马灯效果,即2个led交替闪烁.  1.2 实验思路:根据电路图原理,给led相关引脚赋予高低电平,实现电路的导通,使led灯发光.  1.3 开发 ...

  8. 单元测试报connection is allready closed导致dailybuild中断的解决方案——类加载机制的应用

    现象; 前段时间在dailybuild过程中,经常遇到connection is allready closed错误,特别是在dailybuild高峰期. 分析定位: 这个错误是的起因比较多,这里的情 ...

  9. (转)Spring中Singleton模式的线程安全

    不知道哪里的文章,总结性还是比较好的.但是代码凌乱,有的还没有图.如果找到原文了可以进行替换! spring中的单例 spring中管理的bean实例默认情况下是单例的[sigleton类型],就还有 ...

  10. （转）每天一个linux命令（28）：tar命令

    场景:Linux环境中压缩和解压的命令经常会使用到,所以学好这个命令很有必要! 原文出处:http://www.cnblogs.com/peida/archive/2012/11/30/2795656 ...