dom增删改
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./11.dom增删改.css"> <link rel="stylesheet" href="../CSS/reset.css"> <script> window.onload = function(){ // 创建一个广州节点 myClick("btn01", function(){ var li = document.createElement("li"); var gztext = document.createTextNode("广州"); li.appendChild(gztext); var city = document.getElementById("city"); city.appendChild(li); }); // 将广州节点插入到#bj前面 myClick("btn02", function(){ var li = document.createElement("li"); var gztext = document.createTextNode("广州"); li.appendChild(gztext); var bj = document.getElementById("bj"); var city = document.getElementById("city"); // insertBefore() // 可以在指定的子节点前插入新的子节点 // 语法 // 夫节点.insertBefore(新节点, 旧节点) city.insertBefore(li, bj); }); // 使用广州节点替换#bj myClick("btn03", function(){ var li = document.createElement("li"); var gztext = document.createTextNode("广州"); li.appendChild(gztext); var bj = document.getElementById("bj"); var city = document.getElementById("city"); // replaceChild() // 可以使用指定的子节点替换已有的子节点 // 语法； // 父节点.replaceChild(新节点, 旧节点) city.replaceChild(li, bj); }); // 删除bj节点 myClick("btn04", function(){ var bj = document.getElementById("bj"); var city = document.getElementById("city"); /* removeChild() 可以删除一个子节点 语法；父节点.removeChild(子节点) */ // city.removeChild(bj) bj.parentNode.removeChild(bj); }); // 读取#city内容分的HTML代码 myClick("btn05", function(){ var city = document.getElementById("city"); alert(city.innerHTML) }); // 设置#bj内的HTML代码 myClick("btn06", function(){ var bj = document.getElementById("bj"); bj.innerHTML = "昌平" }); myClick("btn07", function(){ var city = document.getElementById("city"); // city.innerHTML += "<li>河南</li>" // 改进 var li = document.createElement("li") li.innerHTML = "河南" }); }; function myClick(idstr, fun){ var btn = document.getElementById(idstr); btn.onclick = fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p>你喜欢那个城市？</p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> <div id="btnlist"> <div><button id="btn01">创建一个“广州”节点，添加到#city</button></div> <div><button id="btn02">将广州节点插入到#bj前面</button></div> <div><button id="btn03">使用广州节点替换#bj</button></div> <div><button id="btn04">删除bj节点</button></div> <div><button id="btn05">读取#city内容分的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">添加</button></div> </div> </div> </body> </html>
less代码
#total{ // background-color: aqua; width: 600px; display: flex; margin: 50px auto; .inner{ // background-color: red; width: 50%; padding: 20px; border: 1px solid black; #city{ display: flex; margin-top: 40px; flex-wrap:wrap; li{ display: block; width: 50px; height: 30px; background-color: #bfc; line-height: 30px; text-align: center; margin: 5px 5px; } } } #btnlist div button{ width: 250px; margin: 5px 0; } }
全选、反选、全不选、提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ // 全选按钮 // 点击按钮后，四个多选框全部被选中 var checkedAllBtn = document.getElementById("checkedAllBtn"); var items = document.getElementsByName("items"); checkedAllBtn.onclick = function(){ for(var i = 0; i<items.length; i++){ items[i].checked = true; } checkedAllBox.checked = true; }; // 全不选 checkedNoBtn.onclick = function(){ for(var i = 0; i<items.length; i++){ items[i].checked = false; } checkedAllBox.checked = false; }; // 反选 checkedRevBtn.onclick = function(){ for(var i = 0; i<items.length; i++){ // if(items[i].checked){ // items[i].checked = false; // } // else{ // items[i].checked = true; // } items[i].checked = !items[i].checked; checkedAllBox.checked = true; for(var j=0; j<items.length; j++){ if(!items[j].checked){ checkedAllBox.checked = false; } } } }; var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ for (var i=0; i<items.length; i++){ if (items[i].checked){ alert(items[i].value) } } }; var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function(){ for(var i=0; i<items.length; i++){ items[i].checked = this.checked; } }; for(var i=0; i<items.length; i++){ items[i].onclick = function(){ // alert("d") checkedAllBox.checked = true; for(var j=0; j<items.length; j++){ if(!items[j].checked){ checkedAllBox.checked = false; } } }; } // for(var i=0; i<items.length; i++){ // items[i].onclick = function(){ // // alert("d") // var n = 0; // for(var j=0; j<items.length; j++){ // if(items[j].checked){ // n++; // } // } // if (n == 4){ // checkedAllBox.checked = true; // } // else{ // checkedAllBox.checked = false; // } // }; // } }; </script> </head> <body> <form method="post" action=""> 你的爱好运动是？ <input type="checkbox" id="checkedAllBox"/>全选/全不选 <br > <input type="checkbox" name="items" value="足球"/> 足球 <input type="checkbox" name="items" value="蓝球"/> 蓝球 <input type="checkbox" name="items" value="羽毛球"/> 羽毛球 <input type="checkbox" name="items" value="乒乓球"/> 乒乓球 <br> <input type="button" id="checkedAllBtn" value="全 选"> <input type="button" id="checkedNoBtn" value="全不选"> <input type="button" id="checkedRevBtn" value="反 选"> <input type="button" id="sendBtn" value="提交"> </form> </body> </html>
