萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 使用js完成節點的增刪改復制等的操作

使用js完成節點的增刪改復制等的操作

 本文為大家詳細介紹下使用js完成節點的增刪改復制等的操作,具體的實現如下,感興趣的朋友可以參考下

需求:完成節點的增刪改復制的操作    用到的方法和屬性:  1.獲取某個節點的父節點  parentNode屬性  2.獲取某個節點的子節點集合  childNodes屬性  3.創鍵一個新的節點  createTextNode(節點文本內容) document對象的方法 在某些浏覽器上兼容性不是很好  createElement(對象) document對象的方法 例如:document.createElement("a");  4.給某個節點對象添加屬性和屬性值  setAttribute(屬性,屬性值); 例如:aNode.setAttribute("href","http://www.baidu.com");  5.替換某個節點下的子節點  replaceChild(新節點,原子節點);  6.將某個節點添加到一個節點下  appendChild(要添加的節點)  7.克隆某個節點    cloneNode() 不傳參數和傳入true參數一樣,表示克隆該節點包括子節點  代碼如下: <!DOCTYPE html>  <html>  <head>  <title>node_CURD.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="this is my page">  <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  <style type="text/css">  div{  border: red 1px solid;  width: 200px;  height: 50px;  margin: 20px 30px;  padding: 20px;  }  #div_1{  clear:both;  background-color:#FF3366;  }  #div_2{  clear:both;  background-color:#6699FF;  }  #div_3{  clear:both;  background-color:#CCCC99;  }  #div_4{  clear:both;  background-color:#00CC33;  }  </style>  <script type="text/javascript">  // 增加方式一:給第一個div區域添加文本  function addText(){  //1.獲取要添加文本內容的節點  var div_1Node = document.getElementById("div_1");  //2.創建一個文本節點。document對象的createTextNode(文本內容)方法。某些浏覽器不支持。  var TextNode = document.createTextNode("這不就顯示了嗎?");  //3.將文本節點添加到要添加的節點下appendChild(要添加的子節點實例)方法  div_1Node.appendChild(TextNode);  }  // 增加方式二:給第一個div區域添加按鈕  function addButton(){  //1.獲取要添加文本內容的節點  var div_1Node = document.getElementById("div_1");  //2.創建一個節點。document對象的createElement()  var aNode = document.createElement("input");  //3.給指定對象添加屬性和屬性值  //aNode.setAttribute("type","button");//和下面一句代碼達到的效果一樣  aNode.type="button";  aNode.setAttribute("value","按鈕");  aNode.setAttribute("onclick","deleteText('div_1')");  //4.將文本節點添加到要添加的節點下appendChild(要添加的子節點實例)方法  div_1Node.appendChild(aNode);  }    // 刪除方式一:刪除第二個區域的節點的子節點  function deleteText(NodeId){  //1.獲取塊節點  var divNode = document.getElementById(NodeId);  //2.獲取子節點,即文本節點  var chileNode = divNode.childNodes[0];  //3.刪除,傳入一個參數true會刪除其下所有子節點  //chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容  divNode.removeChild(chileNode);  }  // 刪除方式二:刪除元素  function deleteElement(){  //1.獲取塊節點  var div_2Node = document.getElementById("div_2");  //2.獲取父節點,  var parentNode = div_2Node.parentNode;  //3.刪除  parentNode.removeChild(div_2Node);  }    // 修改  function UpdateText(){  //1獲取要修改字符的區域的節點  var div_3Node = document.getElementById("div_3");  //2.獲取第一步中的子節點集合,指定到要修改的節點  var childNode = div_3Node.childNodes[0];  //3.創建一個文本節點  var newNode = document.createTextNode("哈哈,我把你替換了.");  //4.用3步創建的節點替換2步驟中的節點  //childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容  div_3Node.replaceChild(newNode,childNode);  }  //克隆  function copyNode(){  //1.獲取第四區域節點  var div_1Node = document.getElementById("div_1");  //2.獲取第一區域節點  var div_4Node = document.getElementById("div_4");  //3.獲得一個新節點通過克隆第四節點  var newNode = div_4Node.cloneNode();//傳入參數true表示克隆整個節點,包括子節點.默認是true參數的結果  //4.將步驟3的新節點替換掉原來的第一節點  div_1Node.parentNode.replaceChild(newNode,div_1Node);  }  </script>  </head>    <body>  <div id="div_1"></div>    <div id="div_2">這裡是第二個區域</div>    <div id="div_3">這裡是第三個區域</div>    <div id="div_4">這裡是第四個區域</div>  <hr />  <font size="12px">增:</font>  <input type="button" value="給第一個區域增加文本" onclick="addText()" />  <input type="button" value="給第一個區域增加一個按鈕" onclick="addButton()" />  <hr />  <font size="12px">刪:</font>  <input type="button" value="刪除第二區域的文本內容" onclick="deleteText('div_2')" />  <input type="button" value="刪除第二個區域" onclick="deleteElement()" />  <hr />  <font size="12px">改:</font>  <input type="button" value="修改第三個區域中的內容" onclick="UpdateText()" />  <hr />  <font size="12px">克隆:</font>  <input type="button" value="將第四區域克隆到第一區域" onclick="copyNode()" />  </body>  </html> 
copyright © 萬盛學電腦網 all rights reserved