轻松学习JavaScript二十二：DOM编程学习之节点操作
DOM编程不只能够查找三种节点，也能够操作节点。那就是创建，插入，删除。替换和复制节点。先来看节点
操作方法：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
还是借用一贯的HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM编程</title>
<script type="text/javascript">
window.onload=function(){
}
</script>
</head> <body>
<p>你喜欢那个城市</p>
<ul id="city">
<li id="bj">北京市</li>
<li>天津市</li>
<li id="sh">上海市</li>
<li>重庆市</li>
</ul>
<p>你喜欢那个游戏</p>
<ul id="game">
<li id="hsjj">红色警戒</li>
<li>天龙八部</li>
<li>罪恶都市</li>
<li>反恐精英</li>
</ul> <form name="form1" action="">
<input type="radio" name="type" value="city" />城市
<input type="radio" name="type" value="game" />游戏 name：<input type="text" name="name" /> <input type="submit" value="Submit" id="submit" />
</form> </body>
</html>
(1)write()方法
write()方法能够把随意字符串插入到HTML文档中。这样的方法也能够创建节点，可是该方法会覆盖掉原来的整个
HTML文档。也就是原网页的内容被替换为用write()方法输出的内容。一般用于測试，非常少在实际中使用。
document.write("<p>我会覆盖掉原来的HTML文档内容！</p>");
执行结果：
(2)createElement()方法、appendChild()方法和createTextNode()方法配合使用
createElement()方法能够依照指定的标签名创建一个新的元素节点。该方法仅仅有一个參数：被创建的元素节点的
名字，是一个字符串。createElement()方法所返回的引用指针指向一个节点对象，它是一个元素节点。所以他的
nodeType属性值将等于1，新元素节点不会自己主动加入到文档里。它仅仅是一个存在于JavaScript上下文的对象。
appendChild()方法能够将一个新创建的元素节点加入到某个节点的子节点的列表的末尾上，作为指定元素节点的
最后一个子节点，该方法的返回值是一个指向新增节点的引用指针。
createTextNode()方法能够创建一个包括着
指定文本的新文本节点。createTextNode()方法所返回的引用指针指向一个节点对象，它是一个文本节点。所以他的
nodeType属性值将等于3，方法仅仅有一个參数是新建文本节点所包括的文本字串，新文本节点不会自己主动加入到文中。
实例：
//新创建一个li元素节点，加入到指定元素节点的子节点
var liNode=document.createElement("li");
//创建一个有指定文本的文本节点
var textNode=document.createTextNode("江苏省");
//加入到新建li元素节点的子节点(文本节点)中
liNode.appendChild(textNode);
//获取id="city"的元素节点
var cityNode=document.getElementById("city");
//加入到指定元素节点的末尾
cityNode.appendChild(liNode);
执行的结果显示：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
(3)insertBefore()方法
inesrtBefore()能够给把一个给定节点插入到一个指定元素节点的给定子节点的前面，当前元素的前面创建一个节
点。这种方法会接受两个參数，第一个參数是创建的新的节点，第二个參数指定的节点。该方法除了进行插入功能
外，还有移动的功能。
实例：
alert("我在插入之前弹出。");
//获取id="bj"子元素节点
var bjNode=document.getElementById("bj");
//获取id="hsjj"子元素节点
var hsjjNode=document.getElementById("hsjj");
//加入到指定子元素节点前面
bjNode.parentNode.insertBefore(hsjjNode,bjNode);
插入之前：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
插入之后：
既然能在指定的子元素节点之前插入，那么我们怎么做到在指定的子元素节点之后插入呢？
//获取id="bj"子元素节点
var bjNode=document.getElementById("bj");
//获取id="hsjj"子元素节点
var hsjjNode=document.getElementById("hsjj");
//加入到指定子元素节点前面
insertAfter(hsjjNode.bjNode);
function insertAfter(newNode,refNode){
//确定refNode时候为指定子元素节点的父节点最后一个子节点
var refNodeparent=refNode.parentNode;
if(refNodeparent){
//若是，直接把newNode插入到refNode父节点的最后一个子节点
var lastChild=refNodeparent.lastChild;
if(refNode==lastChild){
refNodeparent.appendChild(newNode);
}else{
//若不是。获取refNode的下一个兄弟节点，然后插入到该兄弟节点的前面
var nextNode=refNode.nextSibling;
refNodeparent.insertBefore(newNode,nextNode);
}
}
}
执行的结果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
(6)repalceChild()方法和cloneNode()方法
repalceChild()方法能够把一个给定父元素里的一个子节点替换为为还有一个子节点，返回值是一个指向已被替换的
那个子节点的引用指针。repalceChild()方法仅仅能完毕单向替换。若须要使用双向替换，须要自己定义函数来实现。该方
法除了替换功能还有移动的功能。
、
cloneNode()方法能够把指定的子节点复制出来。克隆一个节点，參数假设是true。则会把标签中的内容克隆。如
果是false。则仅仅会克隆标签名。
实例：
alert("我在替换之前弹出！");
//获取id="bj"的相应的元素子节点
var bjNode=document.getElementById("bj");
//获取id="hsjj"的相应的元素子节点
var hsjjNode=document.getElementById("hsjj");
//获取id="bj"的元素节点所在的父元素节点
var cityNode=document.getElementById("city");
//对id="bj"的元素子节点进行替换
cityNode.replaceChild(hsjjNode,bjNode);
替换前的效果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
替换后的效果：
上面我们仅仅是实现了单向功能的替换，要实现节点的双向互换须要使用两次repalceChild()方法方法。我们能够定
义一个互换函数：
//获取id="bj"的相应的元素子节点
var bjNode=document.getElementById("bj");
//获取id="hsjj"的相应的元素子节点
var hsjjNode=document.getElementById("hsjj");
//调用互换函数进行双向替换
repalceEach(bjNode,hsjjNode);
//自己定义互换函数
function repalceEach(aNode,bNode){
//获取aNodeb，bNode的父节点，使用parentNode属性
aParent=aNode.parentNode;
bParent=bNode.parentNode;
if(aParent&&bParent){
//克隆aNode或bNode
var aNode2=aNode.cloneNode(true);
//分别进行替换
bParent.replaceChild(aNode2,bNode);
aParent.replaceChild(bNode,aNode);
}
}
替换之后：
(8)removeChild()方法
removeChild()方法是从一个给定元素节点的字节里删除一个子节点，返回值是一个指向已被删除的子节点的引用
指针。
当某个节点被removeChild()方法被删除时。这个节点所包干的全部子节点也会将同一时候被删除；假设想删除某个
节点。但不知道它的父节点是哪一个。能够使用parentNode属性帮助解决。
alert("我在被删除之前弹出！
");
//获取id="bj"的相应的元素子节点
var bjNode=document.getElementById("bj");
//利用parentNode属性将id="bj"的子节点删除
bjNode.parentNode.removeChild(bjNode);
删除之前：
删除之后：
我们继续来拓展。要求是：为文档中的每个li元素节点加入一个cofirm()系统对话框，达到是否确认删除信息
，若确定。则删除。我们来看怎么实现：
//获取li素子节点
var liNodes=document.getElementsByTagName("li");
//给每一个li元素节点加入onclick响应事件
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
点击效果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
轻松学习JavaScript二十二：DOM编程学习之节点操作的更多相关文章
- 轻松学习JavaScript二十七：DOM编程学习之事件模型
在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...
- 汇编入门学习笔记 （十二）—— int指令、port
疯狂的暑假学习之 汇编入门学习笔记 (十二)-- int指令.port 參考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引 ...
- 我的MYSQL学习心得（十二） 触发器
我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...
- VSTO 学习笔记（十二）自定义公式与Ribbon
原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...
- 我的MYSQL学习心得（十二）
原文:我的MYSQL学习心得(十二) 我的MYSQL学习心得(十二) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYS ...
- Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序（一）
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6999743.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十一)——S ...
- Linux学习总结（十二）—— CentOS用户管理：创建用户、修改用户、修改密码、密码有效期、禁用账户、解锁账户、删除用户、查看所有用户信息
文章首发于Linux学习总结(十二)-- CentOS用户管理,请尊重原创保留原文链接. 创建用户 useradd -g webadmin -d /home/zhangsan zhangsan pas ...
- (C/C++学习笔记) 二十二. 标准模板库
二十二. 标准模板库 ● STL基本介绍 标准模板库(STL, standard template library): C++提供的大量的函数模板(通用算法)和类模板. ※ 为什么我们一般不需要自己写 ...
- python3.4学习笔记(二十二) python 在字符串里面插入指定分割符，将list中的字符转为数字
python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...
- 学习笔记：CentOS7学习之二十二： 结构化命令case和for、while循环
目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...
随机推荐
- 洛谷P5239 回忆京都
和 NOIP2016TG 组合数问题 差不多是一样的-- 首先要知道杨辉三角和组合数之间的关系 看一下数据范围,很明显要避免重复计算,而且查询的复杂度要非常小 一看n, m <= 1000 这明 ...
- Having用法
HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而 HAVING 搜索条件在进行分组操作之后应用 ...
- 【codeforces 452D】Washer, Dryer, Folder
[题目链接]:http://codeforces.com/problemset/problem/452/D [题意] 洗衣服有3个步骤,洗,干,叠; 有对应的3种洗衣机,分别有n1,n2,n3台,然后 ...
- bzoj 1600 & Usaco 月赛 2008 建造栅栏 题解
[原题] 1600: [Usaco2008 Oct]建造栅栏 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 785 Solved: 443 [Subm ...
- 安全风控的CAP原理和BASE思想
CAP原理最多实现两个,需要牺牲一个来满足其他两个:
- Codeforces Round #252 (Div. 2)-C,D
C题就是一个简单的模拟.首先给每一个人两个.然后把剩下的都给一个人就好了. 给的时候蛇形给. #include<stdio.h> #include<string.h> #inc ...
- Linux内核编译測试
内核编译: Step 1:配置内核编译选项. make menuconfig Optional Step :排除编译结果文件(.o)等之间的依赖性. make mrproper Optional St ...
- oracle 11g RAC 的一些基本概念
一.脑裂以及对策 脑裂(split-brain)是集群中的一个糟糕的情况:集群中的所有集群正在工作的时候,内部通讯被断开.这种情况下,集群被分成了几个部分,每个部分的集群软件都会尝试去接管其他节点的资 ...
- 关于linux下QIODevice类进行读取的几个方法的理解
Qt中对读写设备的支持力度很大,其都继承与QIODevice类,其中有几个方法是非常值得注意的,不管是在用原始的serial port进行通信还是使用网络的TCP/IP 或者UDP或者HTTP等协议时 ...
- Opencv 编译
转载 https://www.cnblogs.com/xinxue/p/5766756.html OpenCV 3.4 版本,圣诞节前发布了,该版本新增了一种去掉视频背景的算法,dnn 模块的进一步改 ...