1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var body=document.getElementsByTagName("body")[0]; 10 console.log(body); 11 /* 12 在document中有一个属性body，它保存的是body的引用 13 document.documentElement保存的是HTML根标签 14 document.all代表页面中所有的元素 15 */ 16 var all=document.all; 17 alert(all.innerHTML);//HTMLAllCollection 18 var body=document.body; 19 //alert(body);//HTMLBodyElement 20 21 all=document.getElementsByTagName("*"); 22 console.log(all.length); 23 /* 24 根据元素的class属性值查询一组元素节点对象 25 getElementsByClassName()可以根据Class属性值获取一组元素节点对象， 26 但是该方法不支持IE8及以下的浏览器 27 */ 28 var box1=document.getElementsByClassName("box1"); 29 console.log(box1.length); 30 31 /* 32 获取页面中的所有的div 33 */ 34 var divs=document.getElementsByTagName("div"); 35 console.log(divs.length); 36 /* 37 .box1 div 38 document.querySelector() 39 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 40 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个 41 document.querySelectorAll() 42 该方法和querySelector(),不同的是它返回符号条件的元素封装到一个数组， 43 即使符合条件的只有一个也要返回数组 44 */ 45 var b=document.querySelector(".box1 div"); 46 console.log(b.innerHTML); 47 var a=document.querySelector(".box1"); 48 console.log(a.innerHTML); 49 var box1=document.querySelectorAll(".box1"); 50 console.log(box1.length); 51 for(var i=0;i<box1.length;i++) 52 console.log(box1[i].innerHTML); 53 }; 54 </script> 55 56 <body> 57 58 <div class="box1"> 59 <div>123</div> 60 </div> 61 <div class="box1">2</div> 62 <div class="box1">3</div> 63 </body> 64 </html>
DOM增删查改
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 function myClick(str,fun) 9 { 10 str=document.getElementById(str); 11 str.onclick=fun; 12 } 13 window.onload=function(){ 14 myClick("01",function(){ 15 /* 16 document.createElement()可以用于创建一个元素节点对象 17 它需要一个标签名作为参数 18 */ 19 var li =document.createElement("li"); 20 /* 21 document.createTextNode() 22 可以用来创建一个文本节点对象 23 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 24 */ 25 var b=document.createTextNode("深圳"); 26 /*将b设置li的子节点 27 appendChild() 28 向一个父节点中添加一个新的子节点 29 用法 父节点.appendChild(子节点); 30 */ 31 li.appendChild(b); 32 var city=document.getElementById("city"); 33 //将广州添加到city下 34 city.appendChild(li); 35 }); 36 /* 37 insertBefore() 38 可以在指定的子节点前插入新的节点 39 语法 父节点.insertBefore(新节点，旧节点) 40 */ 41 myClick("02",function(){ 42 var li=document.createElement("li"); 43 var b=document.createTextNode("广州"); 44 li.appendChild(b); 45 var city=document.getElementById("city"); 46 var bj=document.getElementById("bj"); 47 city.insertBefore(li,bj); 48 }); 49 myClick("03",function(){ 50 var bj=document.getElementById("bj"); 51 var li=document.createElement("li"); 52 var b=document.createTextNode("广东"); 53 li.appendChild(b); 54 /* 55 replaceChild() 56 可以使用指定的子节点替换已有的节点 57 语法 父节点.replaceChild(新节点，旧节点); 58 */ 59 city.replaceChild(li,bj); 60 }); 61 myClick("04",function(){ 62 var bj=document.getElementById("bj"); 63 var city=document.getElementById("city"); 64 /* 65 removeChild() 66 可以删除一个子节点 67 语法 父节点.removeChild(子节点); 68 子节点.parentNode.removeChild(子节点); 69 */ 70 city.removeChild(bj); 71 bj.parentNode.removeChild(bj); 72 }); 73 myClick("05",function(){ 74 var city=document.getElementById("city"); 75 alert(city.innerHTML); 76 }); 77 myClick("06",function(){ 78 var bj=document.getElementById("bj"); 79 bj.innerHTML="成都"; 80 /* 81 使用innerHTML也可以完成DOM的增删改的相关操作 82 city.innerHTML+="<li>广州</li>";//一般会将两种方式结合使用 83 84 //创建一个li 85 var li=document.createElement("li"); 86 li.innerHTML="广州"; 87 //将li添加到city中 88 city.appendChild(li); 89 90 91 */ 92 }); 93 }; 94 </script> 95 96 <body> 97 98 <div> 99 <p>你喜欢什么城市？</p> 100 <ul id="city"> 101 <li>上海</li> 102 <li id="bj">北京</li> 103 </ul> 104 </div> 105 <input type="button" id="01" value="将深圳添加到#city下"/> 106 <input type="button" id="02" value="将广州添加到北京下"/> 107 <input type="button" id="03" value="使用广东节点替换北京节点"/> 108 <input type="button" id="04" value="删除北京节点"/> 109 <input type="button" id="05" value="读取#city内的HTML代码"> 110 <input type="button" id="06" value="设置#bj内的HTML代码"> 111 </body> 112 </html>
不知道为什么 添加新元素后没能将其删除成功
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 9 function del(){ 10 /* 11 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为， 12 可以通过在响应函数的最后return false 来取消默认行为 13 */ 14 //return false;在Firefox和IE里好像没有效果 15 /* 16 点击超链接以后需要删除超链接所在的那行 17 这里我们点击那个超链接this就是谁 18 获取当前的tr 19 */ 20 var tr=this.parentNode.parentNode; 21 //获取要删除要元素的名字 22 var b=tr.getElementsByTagName("th")[0].innerHTML; 23 //alert(b); 24 /* 25 confirm()用于弹出一个带有确认和取消按钮的提示框 26 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 27 如果用户点击确定则会返回true，点击取消则会返回false 28 */ 29 var flag=confirm("确认删除"+b+"吗？"); 30 if(flag) 31 tr.parentNode.removeChild(tr); 32 }; 33 34 window.onload=function(){ 35 //点击超链接删除一个员工的信息 36 //获取使用超链接 37 var allA=document.getElementsByTagName("a"); 38 for(var i=0;i<allA.length;i++){ 39 allA[i].onclick=del; 40 } 41 //为提交按钮绑定一个单击响应函数，获取文本框的内容用value值 42 var addEmpButton=document.getElementById("addEmpButton"); 43 addEmpButton.onclick=function(){ 44 var name=document.getElementById("empName").value; 45 var email=document.getElementById("email").value; 46 var salary=document.getElementById("salary").value; 47 //alert(name+" "+email+" "+salary); 48 //需要将获取到的节点保存到tr 49 var tr=document.createElement("tr"); 50 51 var nameTd=document.createElement("td"); 52 var emailTd=document.createElement("td"); 53 var salaryTd=document.createElement("td"); 54 var aTd=document.createElement("td"); 55 //超链接 56 var a=document.createElement("a");//a标签 57 58 //创建文本节点 59 var nameText=document.createTextNode(name); 60 var emailText=document.createTextNode(email); 61 var salaryText=document.createTextNode(salary); 62 var delText=document.createTextNode("Delete");//在a标签中插入delete 63 64 //将文本条件到td中 65 nameTd.appendChild(nameText); 66 emailTd.appendChild(emailText); 67 salaryTd.appendChild(salaryText); 68 a.appendChild(delText); 69 aTd.appendChild(a); 70 71 //将td加入tr 72 tr.appendChild(nameTd); 73 tr.appendChild(emailTd); 74 tr.appendChild(salaryTd); 75 tr.appendChild(aTd); 76 77 //向a中添加href属性 78 a.href="javascript:;"; 79 a.onclick=del; 80 //获取table 81 var employeeTable=document.getElementById("employeeTable"); 82 var tbody=employeeTable.getElementsByTagName("tbody")[0]; 83 84 //将tr添加到table中 85 tbody.appendChild(tr); 86 }; 87 88 }; 89 </script> 90 91 <body> 92 <table id="employeeTable"> 93 <tr> 94 <th>Name</th> 95 <th>Email</th> 96 <th>Salary</th> 97 <th> </th> 98 </tr> 99 <tr> 100 <th>Tom</th> 101 <th>tom@tom.com</th> 102 <th>5000</th> 103 <th><a href="javascript:;">Delete</a></th> 104 </tr> 105 <tr> 106 <th>Jerry</th> 107 <th>jerry@sohu.com</th> 108 <th>8000</th> 109 <th><a href="javascript:;">Delete</a></th> 110 </tr> 111 <tr> 112 <th>Bob</th> 113 <th>bob@sohu.com</th> 114 <th>2000</th> 115 <th><a href="javascript:;">Delete</a></th> 116 </tr> 117 </table> 118 119 <div id="formDiv"> 120 <h4>添加新员工</h4> 121 <table> 122 <tr> 123 <td class="word">name:</td> 124 <td class="inp"> 125 <input type="text" name="empName" id="empName"/> 126 </td> 127 </tr> 128 129 <tr> 130 <td class="word">email:</td> 131 <td class="inp"> 132 <input type="text" name="email" id="email"/> 133 </td> 134 </tr> 135 136 <tr> 137 <td class="word">salary:</td> 138 <td class="inp"> 139 <input type="text" name="salary" id="salary"/> 140 </td> 141 </tr> 142 143 <tr> 144 <td colspan="2" align="center"> 145 <button id="addEmpButton" value="abc">Submit</button> 146 </td> 147 </tr> 148 </table> 149 </div> 150 </body> 151 </html>
原文：https://www.cnblogs.com/zuiaimiusi/p/11253579.html