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

1、通过关系找节点(父子关系,兄弟关系)

1.1、常用方法

parentNode：获取当前元素的父节点.
childNodes：获取当前元素的所有下一级子元素
firstChild：获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
nextSibling：获取当前节点的下一个节点(兄弟节点)
previousSibling：获取当前节点的上一个节点.

1.2、实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>通过关系找节点</title>

 </head>

 <body>

     <input type="text" id="username"/><a href="#">卖火柴的小女孩</a>

 </body>

 <script type="text/javascript">

     var bodyNode=document.getElementsByTagName("body")[0];

     var parentNode=bodyNode.parentNode;

     alert("父节点的名称"+parentNode.nodeName);//父节点：HTML

     var children=bodyNode.childNodes;

     alert(children.length);//共8个子节点

     for(var i=0;i<children.length;i++){

         alert("节点的名字:"+children[i].nodeName);

     }

     var inputNode=document.getElementById("username");

     alert("下一个兄弟节点:"+inputNode.nextSibling.nodeName);//返回值：A

     alert("上一个兄弟节点:"+inputNode.previousSibling.nodeName);//返回值：#text    表示的是：空格/文本内容(字符串)

 </script>

 </html>

效果图

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

2、添加附件

2.1、创建子节点插入节点，设置节点属性的一些方法

document.createElement("标签名")：创建新元素节点
setAttribute("属性名","属性值")：设置指定标签属性的值。
appendChild()：给对象追加一个子元素。

2.2、实例

例1：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>添加附件</title>

 </head>

 <script type="text/javascript">

     var num=1;

     function add(){

         var inputNode=document.createElement("input");

         inputNode.setAttribute("type","button");

         inputNode.setAttribute("value","按钮"+num);

         num++;

         //因为上面的内容要添加到body的input标签后面，所以这里要获取body标签的位置

         var bodyNode=document.getElementsByTagName("body")[0];

         bodyNode.appendChild(inputNode);//appendChild 添加子节点

     }

 </script>

 <body>

     <input type="button" onClick="add()" value="添加"/>

 </body>

 </html>

效果图

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

例2：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title>JavaScript添加和删除附件</title>

 </head>

 <script type="text/javascript">

     function addFile(){

         //先创建一个tr对象

         var trNode=document.createElement("tr");

         //创建td对象

         var tdNode1=document.createElement("td");

         var tdNode2=document.createElement("td");

         //

         tdNode1.innerHTML="<input type='file'/>";

         tdNode2.innerHTML="<a href='#' onClick='delFile(this)'>删除文件</a>";

         //把td的节点添加到tr节点上

         trNode.appendChild(tdNode1);

         trNode.appendChild(tdNode2);

         var tbodyNode=document.getElementsByTagName("tbody")[0];

         var lastRow=document.getElementById("lastRow");

         tbodyNode.insertBefore(trNode,lastRow);

     }

     //删除附件

     function delFile(aNode){

             var trNode=aNode.parentNode.parentNode;

             var tbodyNode=document.getElementsByTagName("tbody")[0];

             tbodyNode.removeChild(trNode);

     }

 </script>

 <body>

     <table>

     <tr>

         <td><input type="file"/></td><td><a href="#" onClick="delFile(this)">删除文件</a></td> <!-- delFile(this)：里面的this表示当前选中的选项 -->

     </tr>

     </br>

     <tr id="lastRow">

     <td colspan="2"><input type="button" onClick="addFile()" value="添加附件"/></td>

     </tr>

     </table>

 </body>

 </html>

结果图

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

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9528306.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）