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 ...
随机推荐
-
linux笔记
1 动态查看日志 tail -f filename tail -1000f filename 2 解压当前目录内容为xxx.zip zip -r xxx.zip ./* 3 查看内存使用情况 fre ...
-
jQuery右键菜单contextMenu使用实例
在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...
-
sql语法：inner join on, left join on, right join on具体用法
inner join(等值连接) 仅仅返回两个表中联结字段相等的行 left join(左联接) 返回包含左表中的全部记录和右表中联结字段相等的记录 right join(右联接) 返回包含右表中的全 ...
-
BZOJ3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 89 Solve ...
-
【递归】【3月周赛1】【Problem B】
Problem B Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Sub ...
-
TCP：三次握手、四次握手、backlog及其他
TCP是什么 首先看一下OSI七层模型: 然后数据从应用层发下来,会在每一层都加上头部信息进行封装,然后再发送到数据接收端,这个基本的流程中每个数据都会经过数据的封装和解封的过程,流程如下图所示: 在 ...
-
springboot的lombok
lombok概述 lombok简介 Lombok想要解决了的是在我们实体Bean中大量的Getter/Setter方法,以及toString, hashCode等可能不会用到,但是某些时候仍然需要复写 ...
-
day30 __hash__ 计算哈希值
hash() # __hash__哈希的时候会根据内存地址进行哈希,因为地址不同所以哈希的值也不同,哪怕是完全一样子的属性得出的哈希值也不一样因此存在需要某些时刻期望属性相同得出相同哈希值可以控制对象 ...
-
.NET面试题系列（十三）Lucene底层原理
索引原理 全文检索技术由来已久,绝大多数都基于倒排索引来做,曾经也有过一些其他方案如文件指纹.倒排索引,顾名思义,它相反于一篇文章包含了哪些词,它从词出发,记载了这个词在哪些文档中出现过,由两部分组成 ...
-
【JAVAWEB学习笔记】11_XML
今日内容介绍 编写服务器软件,访问指定配置内容 访问tomcat下已经发布的web项目 今日内容学习目标 可以编写xml存放任意内容 通过DTD约束编写指定格式的XML 通过Schema约束编写指定格 ...