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

时间：2023-03-28 09:36:08

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

操作方法：

轻松学习JavaScript二十二：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>");

执行结果：

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

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

执行的结果显示：

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

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

插入之前：

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

插入之后：

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

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

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

	         }

          }

}

执行的结果：

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

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

替换前的效果：

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

       替换后的效果：

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

上面我们仅仅是实现了单向功能的替换，要实现节点的双向互换须要使用两次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);

       }

}

替换之后：

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

(8)removeChild()方法

removeChild()方法是从一个给定元素节点的字节里删除一个子节点，返回值是一个指向已被删除的子节点的引用

指针。

当某个节点被removeChild()方法被删除时。这个节点所包干的全部子节点也会将同一时候被删除；假设想删除某个

节点。但不知道它的父节点是哪一个。能够使用parentNode属性帮助解决。

alert("我在被删除之前弹出！

");

//获取id="bj"的相应的元素子节点

var bjNode=document.getElementById("bj");

//利用parentNode属性将id="bj"的子节点删除

bjNode.parentNode.removeChild(bjNode);

删除之前：

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

删除之后：

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

我们继续来拓展。要求是：为文档中的每个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);

              }

         }

}

点击效果：

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

相关文章