萬盛學電腦網 >> 腳本專題 >> 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved