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. jQuery从入门到忘记

    jQuery 是一套Javascript脚本库,注意 jQuery 是脚本库,而不是脚本框架."库"不等于"框架".jQuery 并不能帮助我们解决脚本的引用管 ...

  2. Vijos 1034 家族 并查集

    描述 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如果x,y是亲戚 ...

  3. 使用hexdump工具追踪EXT4文件系统中的一个文件

    昨天追踪EXT4文件系统的过程中出了点问题,就是找不到文件,于是试了一下追踪FAT32文件系统的,成功之后有了点信心,今天继续嗑EXT4文件系统,终于找到啦,记录一下. 操作系统:linux(cent ...

  4. es6的新内容

    前端学习总结(十八)ES6--新一代的javascript 发表于2016/6/11 21:44:27  2733人阅读 分类: javascript 简介 ECMAScript 6(以下简称ES6) ...

  5. Educational Codeforces Round 25 Five-In-a-Row(DFS)

    题目网址:http://codeforces.com/contest/825/problem/B 题目:   Alice and Bob play 5-in-a-row game. They have ...

  6. 浅谈viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  7. Java - extends

    继承 一个类得到了另一个类当中的成员变量和成员函数. Java只支持单继承,一个父类可以有多个子类. 使用继承,可减少重复代码.把重复代码放入父类中.需要添加共同的成员变量或函数时可以直接操作父类. ...

  8. JMeter 监控和记录&常用功能

    使用https连接时,如果对应站点的CA 证书错误,会直接报连接不到服务器的错误,org.apache.commons.httpclient.NoHttpResponseException,把错误证书 ...

  9. spring boot 配置文件application

    场景:在项目部署的过程中,对于spring boot的配置文件一直不很了解,直到项目出现一个莫名其妙的问题——工程classes中的配置文件被覆盖,程序启动总是报错! 1  配置文件的优先级 appl ...

  10. iOS开发实战-上架AppStore 通过内购和广告获得收益

    写在前面 由于一些原因需要离职,准备重回大上海 忽然发现手头上也没什么独立App,那就随便写个放到AppStore上吧,凑个数吧.哈哈哈. 这个App是无聊找配色的时候看到的一套图 正好春节在家没什么 ...