DOM

1　　找到标签

　　document.getElementById()

2　　操作标签

for(var i=0;i<tags.length;i++){tags[i].innerText=888;}
888

dom的示例2

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>dom模态对话框</title>
  6     <style>
  7         .hidden {
  8 
  9             display: none;
 10 
 11         }
 12 
 13         .c1 {
 14 
 15             position: fixed;
 16             top: 0;
 17             left: 0;
 18             right: 0;
 19             bottom: 0;
 20             background-color: black;
 21             opacity: 0.6;
 22             z-index: 9;
 23         }
 24 
 25         .c2 {
 26             width: 500px;
 27             height: 200px;
 28             background-color: white;
 29             position: fixed;
 30             left: 50%;
 31             top: 50%;
 32             margin-left: -250px;
 33             margin-top: -200px;
 34             z-index: 10;
 35         }
 36     </style>
 37 </head>
 38 <body style="margin: 0;">
 39 <div>
 40     <!--注意此处button后面不能有分号-->
 41     <input type="button" value="添加" onclick="showMenu();"/>
 42     <input type="button" value="全选" onclick="chooseAll();"/>
 43     <input type="button" value="取消" onclick="cancelAll();"/>
 44     <input type="button" value="反选" onclick="reverseAll();"/>
 45 
 46     <table>
 47         <thead>
 48         <tr>
 49 <th>选择</th>
 50             <th>IP地址</th>
 51             <th>端口名称</th>
 52         </tr>
 53         </thead>
 54         <tbody>
 55         <tr>
 56             <td><input type="checkbox" id="checkbox1"></td>
 57             <td>1.1.1.1</td>
 58             <td>8080</td>
 59         </tr>
 60         <tr>
 61             <td><input type="checkbox" id="checkbox2"></td>
 62             <td>1.1.1.2</td>
 63             <td>8090</td>
 64         </tr>
 65         </tbody>
 66     </table>
 67 </div>
 68 <!--遮罩层开始-->
 69 <div id='i1' class="c1 hidden "></div>
 70 <!--遮罩层结束-->
 71 <!--弹出框开始-->
 72 <div id="i2" class="c2 hidden">
 73     <input type="text"/>
 74     <input type="text"/>
 75     <p><input type="button" value="提交" onclick="confirmMenu();">
 76         <input type="button" value="取消" onclick="resetMenu();"></p>
 77 </div>
 78 <!--弹出框结束-->
 79 <script>
 80 
 81     function showMenu() {
 82         document.getElementById('i1').classList.remove('hidden');
 83         document.getElementById('i2').classList.remove('hidden');
 84     }
 85     function confirmMenu() {
 86         document.getElementById('i1').classList.add('hidden');
 87         document.getElementById('i2').classList.add('hidden');
 88     }
 89 
 90 
 91     function chooseAll() {
 92         document.getElementById('checkbox1').checked=true;
 93         document.getElementById('checkbox2').checked=true;
 94     }
 95         function cancelAll() {
 96         document.getElementById('checkbox1').checked=false;
 97         document.getElementById('checkbox2').checked=false;
 98          }
 99         function reverseAll() {
100             var tag=document.getElementById('checkbox1').checked
101             document.getElementById('checkbox1').checked=! tag;
102              var tag=document.getElementById('checkbox2').checked
103             document.getElementById('checkbox2').checked=! tag;
104 
105 
106 
107     }
108 </script>
109 </body>
110 </html>

View Code

dom的示例3

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>dom模态对话框</title>
  6     <style>
  7         .hidden {
  8 
  9             display: none;
 10 
 11         }
 12 
 13         .c1 {
 14 
 15             position: fixed;
 16             top: 0;
 17             left: 0;
 18             right: 0;
 19             bottom: 0;
 20             background-color: black;
 21             opacity: 0.6;
 22             z-index: 9;
 23         }
 24 
 25         .c2 {
 26             width: 500px;
 27             height: 200px;
 28             background-color: white;
 29             position: fixed;
 30             left: 50%;
 31             top: 50%;
 32             margin-left: -250px;
 33             margin-top: -200px;
 34             z-index: 10;
 35         }
 36     </style>
 37 </head>
 38 <body style="margin: 0;">
 39 <div>
 40     <!--注意此处button后面不能有分号-->
 41     <input type="button" value="添加" onclick="showMenu();"/>
 42     <input type="button" value="全选" onclick="chooseAll();"/>
 43     <input type="button" value="取消" onclick="cancelAll();"/>
 44     <input type="button" value="反选" onclick="reverseAll();"/>
 45 
 46     <table>
 47         <thead>
 48         <tr>
 49             <th>选择</th>
 50             <th>IP地址</th>
 51             <th>端口名称</th>
 52         </tr>
 53         </thead>
 54         <tbody id="tb">
 55         <tr>
 56             <td><input type="checkbox" id="checkbox1"></td>
 57             <td>1.1.1.1</td>
 58             <td>8080</td>
 59         </tr>
 60         <tr>
 61             <td><input type="checkbox" id="checkbox2"></td>
 62             <td>1.1.1.2</td>
 63             <td>8090</td>
 64         </tr>
 65         </tbody>
 66     </table>
 67 </div>
 68 <!--遮罩层开始-->
 69 <div id='i1' class="c1 hidden "></div>
 70 <!--遮罩层结束-->
 71 <!--弹出框开始-->
 72 <div id="i2" class="c2 hidden">
 73     <input type="text"/>
 74     <input type="text"/>
 75     <p><input type="button" value="提交" onclick="confirmMenu();">
 76         <input type="button" value="取消" onclick="resetMenu();"></p>
 77 </div>
 78 <!--弹出框结束-->
 79 <script>
 80 
 81     function showMenu() {
 82         document.getElementById('i1').classList.remove('hidden');
 83         document.getElementById('i2').classList.remove('hidden');
 84     }
 85     function confirmMenu() {
 86         document.getElementById('i1').classList.add('hidden');
 87         document.getElementById('i2').classList.add('hidden');
 88     }
 89     function chooseAll() {
 90         var tbody = document.getElementById('tb');
 91         var tr_list = tbody.children;
 92         for (var i = 0; i < tr_list.length; i++) {
 93             var current_tr = tr_list[i];
 94             var checkbox = current_tr.children[0].children[0];
 95             checkbox.checked = true;
 96 
 97         }
 98 
 99     }
100 
101 
102     function cancelAll() {
103         var tbody = document.getElementById('tb');
104         var tr_list = tbody.children;
105         for (var i = 0; i < tr_list.length; i++) {
106             var current_tr = tr_list[i];
107             var checkbox = current_tr.children[0].children[0];
108             checkbox.checked = false;
109 
110         }
111     }
112 
113 
114        function reverseAll() {
115         var tbody = document.getElementById('tb');
116         var tr_list = tbody.children;
117         for (var i = 0; i < tr_list.length; i++) {
118             var current_tr = tr_list[i];
119             var checkbox = current_tr.children[0].children[0];
120             if(checkbox.checked){
121                 checkbox.checked=false;
122             }
123             else{
124                 checkbox.checked=true;
125 
126             }
127 
128         }
129     }
130     /*
131      以下的代码重复性利用率不高  有重复代码
132      function chooseAll() {
133      document.getElementById('checkbox1').checked=true;
134      document.getElementById('checkbox2').checked=true;
135      }
136      function cancelAll() {
137      document.getElementById('checkbox1').checked=false;
138      document.getElementById('checkbox2').checked=false;
139      }
140      function reverseAll() {
141      var tag=document.getElementById('checkbox1').checked
142      //            感叹号表示取反
143      document.getElementById('checkbox1').checked=! tag;
144      var tag=document.getElementById('checkbox2').checked
145      document.getElementById('checkbox2').checked=! tag;
146      }
147      */
148 
149 </script>
150 </body>
151 </html>

View Code