关于JS的DOM操作——重要实例的操作

Posted WORSHIP亚萨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于JS的DOM操作——重要实例的操作相关的知识,希望对你有一定的参考价值。

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操作——重要实例的操作的主要内容,如果未能解决你的问题,请参考以下文章

js中 关于DOM的事件操作

原生JS和jQuery操作DOM的区别小结

js操作dom对象

10-关于DOM的事件操作

ECMAscript,DOM,BOM哪个比较重要

关于获取小程序组件的dom元素属性(详尽版)