Requirement: Complete the operation of the addition, deletion, change and copying of the node
Methods and attributes used:
1. Get the parent node of a node
Parentnode attribute
2. Get the sub -node collection of a node
childnodes attribute
3. Creating a new node
CreateTextNode (node text content) The method of Document object is not very compatible on some browsers
CreateElement (object) document object, such as: document.createelement ("a");
4. Add attributes and attribute values to an object of a node
settattribute (attribute, attribute value); for example: Anode.setattribute ("href", "http://www.baidu.com");
5. Replace the sub -node under a certain node
replacechild (new node, atomic node);
6. Add a node to a node
APPENDCHILD (node to be added)
7. Klong a certain node
Clonenode () does not pass the parameter as the True parameter, indicating that the clone's node includes sub -nodes
Copy code code as follows:
<! 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 method 1: Add text to the first DIV area
function addtext () {
// 1. Get the node to add text content
var dig_1Node = document.GetelementByid ("DIV_1");
// 2. Create a text node. CreateTextNode method of Document object. Some browsers are not supported.
var textNode = document.createtextNode ("Isn't this displayed?");
// 3. Add the text node to the Appendchild (the sub -node instance) method to the node to be added
div
}
// Add method 2: Add button to the first DIV area
function addbutton () {
// 1. Get the node to add text content
var dig_1Node = document.GetelementByid ("DIV_1");
// 2. Create a node. Createelement () of the DOCUMENT object
var anode = document.createElement ("input");
// 3. Add attribute and attribute value to the specified object
//anode.setattribute 18",type","button") ;// It is the same as the effect of the following code reached
anode.type = "Button";
anode.setattribute ("Value", "button");
ANODE.Setattribute ("OnClick", "Deletetext ('DIV_1')");
// 4. Add the text node to the method of APENDCHILD (the sub -node instance to add) under the node to be added
div
}
// Delete method 1: Delete the sub -node of nodes in the second area
function deletetext (nodeid) {
// 1. Get the node
var dignode = document.GetelementByid (nodeid);
// 2. Get the sub -node, that is, the text node
var chilenode = divNode.childNodes [0];
// 3. Delete, pass a parameter TRUE will delete all sub -nodes under it
//Chilenode.removeNode (); // This method is not compatible with Firefox and Google
DivNode.removechild (chilenode);
}
// Delete method two: Delete elements
function deleteelement () {
// 1. Get the node
var dig_2Node = document.GetelementByid ("DIV_2");
// 2. Get the parent node,
var Parentnode = DIV_2NODE. Parentnode;
// 3. Delete
Parentnode.removechild (div_2node);
}
// Revise
function updatetext () {
// 1 Get the node of the area where you want to modify the character
var dig_3node = document.GetelementByid ("DIV_3");
// 2. Get the sub -node collection in the first step, specify the node to be modified
var childnode = div_3node.childnodes [0];
// 3. Create a text node
var newNode = document.createtextNode ("Haha, I replaced you.");
// 4. Use 3 steps to replace the node in step 2 steps
//ChildNode.replaceNode (Newnode) ;// This method is not compatible with Firefox and Google
div
}
//clone
Function CopyNode () {
// 1. Get the fourth regional node
var dig_1Node = document.GetelementByid ("DIV_1");
// 2. Get the first area node
var dig_4Node = document.GetelementByid ("DIV_4");
// 3. Get a new node through the fourth node of the clone
var newnode = div
// 4. Replace the new node of step 3 to remove the original first node
div
}
</script>
</head>
<body>
<div ID = "DIV_1"> </DIV>
<div ID = "div_2"> This is the second area </div>
<div ID = "div_3"> This is the third area </div>
<div ID = "div_4"> This is the fourth area </div>
<hr />
<font size = "12px"> increase: </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 in the second area" onClight = "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 content in the third area" OnClick = "UpdateText ()" /> />
<hr />
<font size = "12px"> cloning: </font>
<input type = "Button" value = "cloned the fourth region to the first region" OnClick = "CopyNode ()" /> />
</body>
</html>