The code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title= "JavaScript node operations" ></title>
<script type= "Text/javascript" src= "Jquery-1.7.js" ></script>
<body>
<input type= "button" id= "Test" name= "nn" value= "EFG" >
<div id = "T" >bbb</div>
<div name= "Parent_test" >
<div id = "T1" ><span>aaa</span><span>bbb</span><span>ccc</span></div >
</div>
<div id = "Fuzhi" ><span>aaa</span><span>bbb</span><span>ccc</span></ Div><div id = "M" ></div>
<script type= "Text/javascript" >
Figure out these three element node attribute node text nodes
1: element node (for element nodes, NodeName always holds the tag name of the element, while the NodeValue value is always null)
var Element_node=document.getelementbyid (' Test ');
alert (Element_node.nodetype); 1
alert (element_node.nodename); Input
alert (Element_node.nodevalue); Null
2: Attribute node
var Attr_node=document.getelementbyid (' Test '). GetAttributeNode (' name ');
alert (Attr_node.nodetype); 2
alert (attr_node.nodename); Name property names
alert (Attr_node.nodevalue); nn property value
3: Text node
var All=document.getelementbyid (' t '). FirstChild;
alert (All.nodetype); 3
alert (all.nodename); #text
alert (All.nodevalue); BBB text content
var Tt1=document.getelementbyid (' T1 ');
alert (Tt1.firstChild.innerHTML); Aaa
alert (Tt1.lastChild.innerHTML); Ccc
var tt2=tt1.childnodes[1].innerhtml;
Alert (TT2)/bbb
var tt3=tt1.parentnode.getattribute (' name ');
alert (TT3); Parent_test
var tt4=tt1.childnodes[1];
alert (Tt4.nextSibling.innerHTML); Ccc
alert (Tt4.previousSibling.innerHTML); Aaa
A detailed introduction to node methods
var Tt5=document.getelementbyid (' Test ');
var Tt6=document.getelementbyid (' t ')
HasChildNodes () Method: Determines whether a node has child nodes, returns True, does not return false
Alert (Tt5.haschildnodes ()); False
Alert (Tt6.haschildnodes ()); True
RemoveChild () Method: Removing a node
var First_node=document.getelementbyid (' T1 '). FirstChild;
document.getElementById (' T1 '). RemoveChild (First_node); Delete First node AAA
AppendChild () Method: Add a node if the node already exists in the document tree, delete it, and then insert it in the new location.
var First_node=document.getelementbyid (' T1 '). FirstChild;
document.getElementById (' T1 '). appendchild (First_node); AAA becomes the last node
ReplaceChild () Method: Deletes (and returns) the specified child node from the document tree and replaces it with another node
InsertBefore () Method: Inserts a node before the specified node, if it already exists, deletes the original, and then inserts it at the new location.
var newd=document.createelement ("span");
Newd.innerhtml= "Eee";
document.getElementById (' T1 '). appendchild (NEWD); Load a child node
var Oldd=document.getelementbyid (' T1 '). LastChild;
document.getElementById (' T1 '). ReplaceChild (NEWD,OLDD); Replace the last child node
document.getElementById (' T1 '). InsertBefore (NEWD,OLDD); Inserts a node before the specified position AAABBBEEECCC
CloneNode () Method: Copies a node that has a parameter, true means that all child nodes are replicated at the same time, and False indicates that the current node is copied near.
var What=document.getelementbyid (' Fuzhi '). CloneNode (True). InnerHTML;
document.getElementById (' m '). Innerhtml=what;
</script>
</body>