轻松学习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 ...

随机推荐

pytorch 1 torch_numpy, 对比
import torch import numpy as np details about math operation in torch can be found in: http://pytorc ...
洛谷 1063 dp 区间dp
洛谷 1063 dp 区间dp 感觉做完这道提高组T1的题之后,受到了深深的碾压,,最近各种不在状态.. 初看这道题,不难发现它具有区间可并性,即(i, j)的最大值可以由(i, k) 与 (k+1, ...
ASP.NET-Router配置中MapRoute的参数
App_Start文件夹中的RouteConfig MapRoute(string name,string url); MapRoute(string name,string url,object d ...
POJ 3744
矩阵快速乘求概率,不难.但有注意的一点是,一定要注意地雷连着的情况,一旦出现两个雷相邻,就必定为0了. #include <iostream> #include <algorithm ...
JDK+JDBC+MySQL实例及注意事项
by qx.zhong Hangzhou 29 Jun 2014 开发环境 OS: Win8.1 x64 JDK: 1.8 SE DB: MySQL 5.5 Lib: mysql-connec ...
亚马逊AWS学习——多网络接口下配置EC2实例连接公网的一个“bug”
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/47667627 本文出自[我是干勾鱼的博客] 之前在<亚马逊AWS学习--E ...
根据数据库表结构生成java类
import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWrit ...
java-面向对象（二）
这几天正在看HeadFirst的时候,突然认为面向对象的几个特点,有点理解模糊不清.所以在这再次回想一下,加深印象. 上篇博客(http://blog.csdn.net/u010539352/arti ...
[jzoj 6086] [GDOI2019模拟2019.3.26] 动态半平面交解题报告 (set+线段树)
题目链接: https://jzoj.net/senior/#main/show/6086 题目: 题解: 一群数字的最小公倍数就是对它们质因数集合中的每个质因数的指数取$max$然后相乘这样的子树 ...
Redis-2-对于key的通用操作
Redis-2-对于key的通用操作标签(空格分隔): redis del key key1 key2 作用: 删除1个或多个键返回值: 不存在的key忽略掉,返回真正删除的key的数量 rena ...

轻松学习JavaScript二十二：DOM编程学习之节点操作

轻松学习JavaScript二十二：DOM编程学习之节点操作的更多相关文章

随机推荐

热门专题