<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 1.获取元素节点 1）直接获取 【1】document.getElementById() 【2】document.getElementByName() 【3】document.getElementByTagName() */ function getEle(){ var obj = document.getElementById("sec"); console.log(typeof obj); console.log(obj); } window.setInterval(getEles,1000); function getEles(){ var sec = document.getElementById("sec").innerHTML; var number = parseInt(sec); document.getElementById("sec").innerHTML = --number; if(sec==0){ window.close(); } } function getEle2(){ //获取的是一个数组 var obj = document.getElementsByName("fav"); console.log(obj) } function getEle3(){ var obj = document.getElementsByTagName("input"); console.log(obj); } /* 2)间接获取 父子关系 childNodes firstChild lastChild 子父关系 parentNode 兄弟关系 nextSibling previousSibling */ function getEle4(){ var father = document.getElementById("regForm"); var sons = father.childNodes; console.log(sons[1]); } function getEle5(){ var sons = document.getElementById("userid"); console.log(sons.parentNode); } function getEle6(){ var bro = document.getElementById("userid"); console.log(bro.nextSibling.nextSibling); console.log(bro.previousSibling); } /* * 2.操作属性节点 *1)通过对象“.”属性 * 优点：可以动态获取用户修改的属性值 * 缺点：不能获取自定义属性的值 * 2)getAttribute setAttribute removeAttribute * 优点：可以获取自定义属性的值 * 缺点：不能动态获取用户修改的属性值 * */ function getField1(){ var obj = document.getElementById("nickid"); console.log(obj.type); // obj.type = "password"; var objval = obj.getAttribute("abcd"); var objval2 = obj.setAttribute("abcd",5678); } /* * 3.处理文本节点 *1)通过对象.innerText获取标签内部的文本信息 * 2)通过对象.innerHTML获取标签内部的HTML代码 * */ function getText1(){ var myDiv = document.getElementById("myDiv") console.log(myDiv.innerText); } function getText2(){ var myDiv = document.getElementById("myDiv") console.log(myDiv.innerHTML); } function getText3(){ var myDiv = document.getElementById("myDiv") myDiv.innerText = "<img src='1.jpg'/>"; } function getText4(){ var myDiv = document.getElementById("myDiv") myDiv.innerHTML = "<img src='webp.jpg' height='200px' width='200px'/>"; } </script> </head> <body> <button onclick="getEle()">点我测试！</button> <button onclick="getEle2()">点我测试2！</button> <button onclick="getEle3()">点我测试3！</button> <button onclick="getEle4()">点我测试4！</button> <button onclick="getEle5()">点我测试5！</button> <button onclick="getEle6()">点我测试6！</button> <hr/> <button onclick="getField1()">属性测试1！</button> <hr/> <button onclick="getText1()">文本测试1！</button> <button onclick="getText2()">文本测试2！</button> <button onclick="getText3()">文本测试3！</button> <button onclick="getText4()">文本测试4！</button> <form id="regForm"> 用户名：<input id="userid" type="text" name="username"/><br/> 密码：<input type="password" name="password"><br/> 昵称：<input id="nickid" type="text" name="nickname" abcd="1234"><br/> 性别：男<input type="radio" name="gender" value="nan"> 女<input type="radio" name="gender" value="nv"><br/> 爱好：狗<input type="checkbox" name="fav" value="dog"> 猫<input type="checkbox" name="fav" value="cat"><br/> <input type="submit" value="注册">; </form> 页面将在<span id="sec">1000</span>s后关闭 <p id="myDiv">hello</p> </body>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> /* 4.动态改变DOM结构 1）创建一个节点对象 document.createElement("标签名") 2）（父节点）追加子节点对象 fatherNode.appendChild("子节点对象") 3）（父节点）在指定节点前添加子节点 fatherNode.insertBefore(新节点对象参考节点对象) 4）（父节点）替换旧的子节点对象 fatherNode.replaceChild(新节点对象，旧节点对象) 5)（父节点）删除旧的子节点对象 fatherNode.removeChild(旧节点对象) . * */ function changeDom1(){ var ipt = document.createElement("input"); ipt.type = "text"; } function changeDom2(){ var father = document.getElementById("regForm"); var ipt = document.createElement("input"); ipt.type = "text"; father.appendChild(ipt); } function changeDom3(){ var father = document.getElementById("regForm"); //参考节点 var refNode = document.getElementById("brid"); var ipt = document.createElement("input"); ipt.type = "text"; father.insertBefore(ipt,refNode); } function changeDom4(){ var father = document.getElementById("regForm"); //参考节点 var refNode = document.getElementById("brid"); var ipt = document.createElement("input"); ipt.type = "text"; father.replaceChild(ipt,refNode); } function changeDom5(){ var father = document.getElementById("regForm"); var refChild = document.getElementById("nickid"); father.removeChild(refChild); } </script> </head> <body> <button onclick="changeDom1()"> 创建节点</button> <button onclick="changeDom2()"> 追加子节点对象</button> <button onclick="changeDom3()"> 插入子节点对象</button> <button onclick="changeDom4()"> 替换子节点对象</button> <button onclick="changeDom5()"> 删除子节点对象</button> <hr/> <form id="regForm"> 用户名：<input id="userid" type="text" name="username"/><br/> 密码：<input type="password" name="password"><br id="brid"/> 昵称：<input id="nickid" type="text" name="nickname" abcd="1234"><br/> 性别：男<input type="radio" name="gender" value="nan"> 女<input type="radio" name="gender" value="nv"><br/> 爱好：狗<input type="checkbox" name="fav" value="dog"> 猫<input type="checkbox" name="fav" value="cat"><br/> <input type="submit" value="注册"> </form> <hr/> <table id="tableid" border="1" style="border-collapse: collapse"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> <td><a href="javascript:void(0)" onclick="deleteRow(this),confirmDemo()">删除</a> </td> </tr> <tr> <td>李四</td> <td>19</td> <td>男</td> <td><a href="javascript:void(0)" onclick="deleteRow(this),confirmDemo()">删除</a> </td> </tr> </table> <script type="application/javascript"> function deleteRow(item){ var delNode = item.parentNode.parentNode; var father = delNode.parentNode; father.removeChild(delNode); } function confirmDemo(){ confirmDemo("是否确定删除"); } </script> </body> </html>
</html>