1、通过关系找节点(父子关系,兄弟关系)
1.1、常用方法
parentNode：获取当前元素的父节点.
childNodes：获取当前元素的所有下一级子元素
firstChild：获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
nextSibling：获取当前节点的下一个节点(兄弟节点)
previousSibling：获取当前节点的上一个节点.
1.2、实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>通过关系找节点</title> 6 </head> 7 8 <body> 9 <input type="text" id="username"/><a href="#">卖火柴的小女孩</a> 10 </body> 11 <script type="text/javascript"> 12 var bodyNode=document.getElementsByTagName("body")[0]; 13 var parentNode=bodyNode.parentNode; 14 alert("父节点的名称"+parentNode.nodeName);//父节点：HTML 15 16 var children=bodyNode.childNodes; 17 alert(children.length);//共8个子节点 18 for(var i=0;i<children.length;i++){ 19 alert("节点的名字:"+children[i].nodeName); 20 } 21 22 var inputNode=document.getElementById("username"); 23 alert("下一个兄弟节点:"+inputNode.nextSibling.nodeName);//返回值：A 24 alert("上一个兄弟节点:"+inputNode.previousSibling.nodeName);//返回值：#text 表示的是：空格/文本内容(字符串) 25 26 </script> 27 </html>
效果图
2、添加附件
2.1、创建子节点插入节点，设置节点属性的一些方法
document.createElement("标签名")：创建新元素节点
setAttribute("属性名","属性值")：设置指定标签属性的值。
appendChild()：给对象追加一个子元素。
2.2、实例
例1：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>添加附件</title> 6 </head> 7 <script type="text/javascript"> 8 var num=1; 9 function add(){ 10 var inputNode=document.createElement("input"); 11 inputNode.setAttribute("type","button"); 12 inputNode.setAttribute("value","按钮"+num); 13 num++; 14 //因为上面的内容要添加到body的input标签后面，所以这里要获取body标签的位置 15 var bodyNode=document.getElementsByTagName("body")[0]; 16 bodyNode.appendChild(inputNode);//appendChild 添加子节点 17 } 18 </script> 19 <body> 20 <input type="button" onClick="add()" value="添加"/> 21 </body> 22 </html>
效果图
例2：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>JavaScript添加和删除附件</title> 7 </head> 8 <script type="text/javascript"> 9 function addFile(){ 10 //先创建一个tr对象 11 var trNode=document.createElement("tr"); 12 //创建td对象 13 var tdNode1=document.createElement("td"); 14 var tdNode2=document.createElement("td"); 15 // 16 tdNode1.innerHTML="<input type='file'/>"; 17 tdNode2.innerHTML="<a href='#' onClick='delFile(this)'>删除文件</a>"; 18 //把td的节点添加到tr节点上 19 trNode.appendChild(tdNode1); 20 trNode.appendChild(tdNode2); 21 var tbodyNode=document.getElementsByTagName("tbody")[0]; 22 var lastRow=document.getElementById("lastRow"); 23 tbodyNode.insertBefore(trNode,lastRow); 24 } 25 26 //删除附件 27 function delFile(aNode){ 28 var trNode=aNode.parentNode.parentNode; 29 var tbodyNode=document.getElementsByTagName("tbody")[0]; 30 tbodyNode.removeChild(trNode); 31 } 32 </script> 33 <body> 34 <table> 35 <tr> 36 <td><input type="file"/></td><td><a href="#" onClick="delFile(this)">删除文件</a></td> <!-- delFile(this)：里面的this表示当前选中的选项 --> 37 </tr> 38 </br> 39 <tr id="lastRow"> 40 <td colspan="2"><input type="button" onClick="addFile()" value="添加附件"/></td> 41 </tr> 42 </table> 43 </body> 44 </html>
结果图
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/9528306.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |