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

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

</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=" 100px;"></select><br>
       <select id="slt" size="7" style=" 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=" 100px;float: left;position: relative">
           <option >北京</option>
           <option >上海</option>
           <option >上海</option>
           <option >深圳</option>
           <option >香港</option>
       </select>
       <select id="newSelect" size="10" multiple="multiple" style=" 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>