Js to complete the operation of adding deleting changing copying and so on

2020-03-30 01:14:18
OfStack

Requirements: complete the operation of adding, deleting, changing and copying nodes

Methods and properties used:
1. Get the parent of a node
ParentNode properties
2. Get the collection of children of a node
.childnodes attribute
3. Create a new node
The methods of the createTextNode(node text content) document object are not very compatible with some browsers
Method of a document object such as document.createelement ("a");
4. Add attributes and attribute values to a node object
SetAttribute (attribute, attribute value); For example: aNode setAttribute (" href ", "http://www.baidu.com");
5. Replace children under a node
ReplaceChild (new node, atomic node);
Add a node to a node
AppendChild (node to add)
Clone a node

CloneNode () does not pass a parameter, like the passed true parameter, to clone the node including the children

 
<!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"> 
//Add text to the first div area
function addText(){ 
//1. Get the node to add text content to
var div_1Node = document.getElementById("div_1"); 
//2. Create a text node. The createTextNode(text content) method of the document object. Some browsers do not support it.
var TextNode = document.createTextNode(" Isn't that what it shows? "); 
//Add a text node to the appendChild(child node instance to be added) method under the node to be added
div_1Node.appendChild(TextNode); 
} 
//Add mode two: add a button to the first div area
function addButton(){ 
//1. Get the node to add text content to
var div_1Node = document.getElementById("div_1"); 
//2. Create a node. CreateElement () of the document object
var aNode = document.createElement("input"); 
//3. Add properties and property values to the specified object
//aNode.setAttribute("type","button");// This is the same as the following line of code  
aNode.type="button"; 
aNode.setAttribute("value"," button "); 
aNode.setAttribute("onclick","deleteText('div_1')"); 
//Add a text node to the appendChild(child node instance to be added) method under the node to be added
div_1Node.appendChild(aNode); 
} 

//Delete mode 1: delete the children of the node of the second region
function deleteText(NodeId){ 
//1. Get the block node
var divNode = document.getElementById(NodeId); 
//2. Get the child node, that is, the text node
var chileNode = divNode.childNodes[0]; 
//3. Delete. Passing in a parameter true will delete all the children under it
//chileNode.removeNode(); //  This is not compatible with firefox and Google  
divNode.removeChild(chileNode); 
} 
//Delete mode two: delete elements
function deleteElement(){ 
//1. Get the block node
var div_2Node = document.getElementById("div_2"); 
//2. Get the parent node,
var parentNode = div_2Node.parentNode; 
//3. Delete
parentNode.removeChild(div_2Node); 
} 

//  Modify the  
function UpdateText(){ 
//Gets the node of the region where the character is to be modified
var div_3Node = document.getElementById("div_3"); 
//2. Gets the collection of child nodes from the first step and specifies the node to modify
var childNode = div_3Node.childNodes[0]; 
//3. Create a text node
var newNode = document.createTextNode(" Haha, I replaced you ."); 
//4. Replace the node in step 2 with the node created in step 3
//childNode.replaceNode(newNode);// This is not compatible with firefox and Google  
div_3Node.replaceChild(newNode,childNode); 
} 
// cloning  
function copyNode(){ 
//1. Get the fourth region node
var div_1Node = document.getElementById("div_1"); 
//2. Get the first region node
var div_4Node = document.getElementById("div_4"); 
//3. Get a new node by cloning the fourth node
var newNode = div_4Node.cloneNode();//The default is the result of the true parameter
//4. Replace the new node in step 3 with the original first node
div_1Node.parentNode.replaceChild(newNode,div_1Node); 
} 
</script> 
</head> 

<body> 
<div id="div_1"></div> 

<div id="div_2"> This is the second region </div> 

<div id="div_3"> This is the third region </div> 

<div id="div_4"> This is the fourth area </div> 
<hr /> 
<font size="12px"> Add: </font> 
<input type="button" value=" Add text to the first area " onclick="addText()" /> 
<input type="button" value=" Add a button to the first area " onclick="addButton()" /> 
<hr /> 
<font size="12px"> Delete: </font> 
<input type="button" value=" Delete the text content of the second area " onclick="deleteText('div_2')" /> 
<input type="button" value=" Delete the second area " onclick="deleteElement()" /> 
<hr /> 
<font size="12px"> Change: </font> 
<input type="button" value=" Modify the contents of the third area " onclick="UpdateText()" /> 
<hr /> 
<font size="12px"> Cloning: </font> 
<input type="button" value=" Clone region 4 to region 1 " onclick="copyNode()" /> 
</body> 
</html>