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

最新推荐文章于 2022-05-24 11:16:37 发布

life is wonderful

最新推荐文章于 2022-05-24 11:16:37 发布

阅读量2.9k

点赞数 4

分类专栏： JavaScript DOM编程学习文章标签： Javascript DOM编程 Web前端开发 DOM对象模型 dom

本文链接：https://blog.csdn.net/erlian1992/article/details/50359638

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

DOM编程学习

12 篇文章 6 订阅

订阅专栏

DOM编程不仅仅可以查找三种节点，也可以操作节点，那就是创建，插入，删除，替换和复制节点。先来看节点

操作方法：

还是借用一贯的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.οnlοad=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);

运行的结果显示：

(3)insertBefore()方法

inesrtBefore()可以给把一个给定节点插入到一个指定元素节点的给定子节点的前面，当前元素的前面创建一个节

点。这个方法会接受两个参数，第一个参数是创建的新的节点，第二个参数指定的节点。该方法除了进行插入功能

外，还有移动的功能。

实例：

alert("我在插入之前弹出！");
//获取id="bj"子元素节点
var bjNode=document.getElementById("bj");
//获取id="hsjj"子元素节点
var hsjjNode=document.getElementById("hsjj");
//添加到指定子元素节点前面
bjNode.parentNode.insertBefore(hsjjNode,bjNode);

插入之前：

插入之后：

既然能在指定的子元素节点之前插入，那么我们怎么做到在指定的子元素节点之后插入呢？

//获取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);
	         }
          }
}

运行的结果：

(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);

替换前的效果：

替换后的效果：

上面我们只是实现了单向功能的替换，要实现节点的双向互换需要使用两次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].οnclick=function(){
              var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");
              if(flag){
                    this.parentNode.removeChild(this);
              }
         }
}

点击效果：

life is wonderful

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
轻松学习JavaScript二十二：DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点，也可以操作节点，那就是创建，插入，删除，替换和复制节点。先来看节点操作方法：还是借用一贯的HTML代码：DOM编程window.onload=function(){ } 你喜欢那个城市北京市天津市上海市
复制链接

扫一扫