java基础67 JavaScript通过关系找节点、添加附件（网页知识）

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>