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>
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>