轻松学习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 ...
随机推荐
- 华硕VX50V开机老是进入bios
问题:华硕VX50V开机老是进入bios 如图: 解决办法: 1.将 Boot 中的--->> Lunch CSM ---->>设置为 -->> ena ...
- synchronized的实现原理及锁优化
记得刚刚开始学习Java的时候,一遇到多线程情况就是synchronized.对于当时的我们来说,synchronized是如此的神奇且强大.我们赋予它一个名字“同步”,也成为我们解决多线程情况的良药 ...
- HTML5与后台服务器的数据流动问题
编辑中,尚未完稿...2017.7.14 1345 很多前端开发出来的HTML5可能对于后台开发者来说,并不是很清楚,也许像我一样一知半解.而且真的让人很糊涂的地方就是前端的JS如何与后端的数据库进行 ...
- sap abap 对字符串的操作
替换字段内容 REPLACE [FIRST /ALL OCCURRENCES OF]<STR1>INTO <STR> WITH <STR2> DATA STR ...
- bzoj5204: [CodePlus 2018 3 月赛]投票统计(离散化+暴力)
5204: [CodePlus 2018 3 月赛]投票统计 题目:传送门 题解: 谢谢niang老师的一道sui题 离散化之后直接搞啊(打完之后还错了...) 代码: #include<cst ...
- ES设置查询的相似度算法
similarity Elasticsearch allows you to configure a scoring algorithm or similarity per field. The si ...
- zzulioj--1712--Monty Hall problem(蒙提霍尔问题)
1721: Monty Hall problem Time Limit: 1 Sec Memory Limit: 128 MB Submit: 186 Solved: 71 SubmitSt ...
- Re：从0开始的微服务架构：（一）重识微服务架构--转
原文地址:http://www.infoq.com/cn/articles/micro-service-architecture-from-zero?utm_source=infoq&utm_ ...
- .NET框架详解
.NET框架的战略目标 .NET框架的战略目标是在任何时候(When),任何地方(Where),使用任何工具(What)都能通过.NET的服务获得网络上的任何信息,享受网络带给人们的便捷和快乐! .N ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...