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>

效果图

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>

效果图

 例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>

结果图

原创作者：DSHORE

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

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

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

java基础67 JavaScript通过关系找节点、添加附件（网页知识）的更多相关文章

  1. java基础59 JavaScript运算符与控制流程语句（网页知识）

    1.JavaScript运算符 1.1.加减乘除法 加法:+(加法,连接符,正数)          true是1,false是0    减法:-    乘法:*    除法:/ 1.2.比较运算符 ...

  2. Java基础83 JSP标签及jsp自定义标签（网页知识）

    1.JSP标签 替代jsp脚本,用于jsp中执行java代码1.1.内置标签:  <jsp:forward></jsp:forward>  相当于:request.getReu ...

  3. java基础73 dom4j修改xml里面的内容（网页知识）

    1.DOM4J对XML文件进行增删改操作 实现代码 package com.shore.code; import java.io.File; import java.io.FileOutputStre ...

  4. java基础58 JavaScript的几种格式和变量的声明方式（网页知识）

    1.JavaScript的几种格式 1.1.JavaScript的特点 1.跨平台性    2.安全性.(javaScript代码不能直接访问电脑硬盘上的信息) 1.2.Java与javaScript ...

  5. java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

  6. java基础68 JavaScript城市联动框（网页知识）

    1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  7. java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）

    本文知识点(目录): 1.Number对象    2.Math对象    3.String对象    4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...

  8. java基础69 JavaScript产生伪验证码（网页知识）

    1.伪验证码 <!doctype html> //软件版本:DW2018版 <html> <head> <meta charset="utf-8&q ...

  9. java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

随机推荐

  1. Linux及安全实践三——程序破解

    Linux及安全实践三--程序破解 一.基本知识 常用指令机器码 指令 作用 机器码 nop 无作用(no operation) 90 call 调用子程序,子程序以ret结尾 e8 ret 返回程序 ...

  2. 解题：USACO13NOV No Change

    题面 在朴素中透着一点新意的状压DP 一个很暴力的思路是枚举位置,状态和硬币,每次二分出向前最多能买到哪里,复杂度爆炸($O(2^knklog$ $n)$) 考虑优化,不妨先预处理一下$goal[i] ...

  3. 2：spring中的@resource

    @Resource 其实是spring里面的注解注入. @Resource(这个注解属于J2EE的),默认安照名称进行装配,名称可以通过name属性进行指定, 如果没有指定name属性,当注解写在字段 ...

  4. beego 定义一个存储变量的容器

    golang 这种语言相对于 php 有个好处是,不用每次请求都重复一些不必要的初始化操作,golang 进程开启之后,即使请求结束,相关的资源也会驻留在内存中. 所以我们可以把一些不需要重复初始化的 ...

  5. BAYES和朴素BAYES

    0 前言  朴素贝叶斯算法仍然是流行的十大挖掘算法之一,该算法是有监督的学习算法,解决的是分类问题,如客户是否流失.是否值得投资.信用等级评定等多分类问题.该算法的优点在于简单易懂.学习效率高.在某些 ...

  6. NATS_02：NATS消息通信模型

    消息通信模型 NATS的消息通信是这样的:应用程序的数据被编码为一条消息,并通过发布者发送出去:订阅者接收到消息,进行解码,再处理.订阅者处理NATS消息可以是同步的或异步的. * 异步处理  异步处 ...

  7. caffe 配置文件详解

    主要是遇坑了,要记录一下. solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 # caffe train --s ...

  8. 科学计算三维可视化---TVTK入门（数据加载）

    一:数据加载 大多数可视化应用的数据并非是在TVTK库中构建的,很多都是通过接口读取外部数据文件 (一)使用vtkSTLReader来读取外部文件 .stl 文件是在计算机图形应用系统中,用于表示三角 ...

  9. 2017 清北济南考前刷题Day 2 afternoon

    期望得分:100+60+70=230 实际得分:0+60+0=60 T1 可以证明如果一对括号原本就匹配,那么这对括号在最优解中一定不会被分开 所以用栈记录下没有匹配的括号 最后栈中一定是 一堆右括号 ...

  10. Java并发编程原理与实战十九：AQS 剖析

    一.引言在JDK1.5之前,一般是靠synchronized关键字来实现线程对共享变量的互斥访问.synchronized是在字节码上加指令,依赖于底层操作系统的Mutex Lock实现.而从JDK1 ...