The Code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title = "Javascript node operations"> </title>
<Script type = "text/javascript" src = "jquery-1.7.js"> </script>
</Head>
<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">
// Identify these three element nodes attribute node text nodes
// 1: Element Node (for element nodes, nodeName always stores the label name of the element, while nodeValue 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 attribute name
Alert (attr_node.nodeValue); // nn Attribute 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.previussibling. innerHTML); // aaa
// Node Method details
Var tt5 = document. getElementById ('test ');
Var tt6 = document. getElementById ('T ')
// HasChildNodes () method: determines whether a node has subnodes. If yes, true is returned. If no, false is returned.
// Alert (tt5.hasChildNodes (); // false
// Alert (tt6.hasChildNodes (); // true
// RemoveChild () method: Remove a node
Var first_node = document. getElementById ('t1'). firstChild;
// Document. getElementById ('t1'). removeChild (first_node); // Delete the first node aaa
// AppendChild () method: Add a node. If the node already exists in the Document Tree, delete it and insert it in the new position.
Var first_node = document. getElementById ('t1'). firstChild;
// Document. getElementById ('t1'). appendChild (first_node); // aaa becomes the last Node
// ReplaceChild () method: delete (and return) the specified child node from the document tree and replace it with another node.
// InsertBefore () method: Insert a node before the specified node. if it already exists, delete the original one and insert it in the new position.
Var newd = document. createElement ("span ");
Newd. innerHTML = "eee ";
// Document. getElementById ('t1'). appendChild (newd); // load a subnode
Var oldd = document. getElementById ('t1'). lastChild;
// Document. getElementById ('t1'). replaceChild (newd, oldd); // Replace the last subnode
// Document. getElementById ('t1'). insertBefore (newd, oldd); // insert a node aaabbbeeeccc before the specified position
// CloneNode () method: copy a node. This method has a parameter. "true" indicates that all child nodes are copied at the same time. "false" indicates that the current node is nearly copied.
Var what = document. getElementById ('fuzhi'). cloneNode (true). innerHTML;
Document. getElementById ('M'). innerHTML = what;
</Script>
</Body>
</Html>
