Javascript DOM operation implementation code

Simple Table:
Copy codeThe Code is as follows:
<Table>
<Tr>
<Td id = "TEST">
<Input type = "submit" value = "OK">
<Input type = "button" value = "cancel">
</Td>
</Tr>
</Table>

Tested:
Copy codeThe Code is as follows:
Var td = document. getElementById ("TEST ");
Alert (td. childNodes. length); the result is 4

I was puzzled. After reading the relevant materials, I found that in JS, space is also used as a text node, and there are spaces behind both input elements.
As a text node, the result is 4.
Result 2 after space is deleted
To process space nodes, use the following functions
Copy codeThe Code is as follows:
Function cleanWhitespace (element)
{
For (var I = 0; I <element. childNodes. length; I ++)
{
Var node = element. childNodes [I];
If (node. nodeType = 3 &&! /\ S/. test (node. nodeValue ))
{
Node. parentNode. removeChild (node );
}
}
}

After the processing node cleanWhitespace (document. getElementById ("TEST"), OK to solve
Appendix:
DOM Basic Method
1. Directly reference a node
1.doc ument. getElementById (id );
-- Find the node through id in the document
2.doc ument. getElementByTagName (tagName );
-- Returns an array containing references to these nodes.
-- For example, document. getElementByTagName ("span"); All nodes of the span type are returned.
Ii. indirect reference node
3. element. childNodes
-- Return all the child nodes of the element, which can be called using element. childNodes [I ].
-- Element. firstChild = element. childNodes [0];
-- Element. lastChild = element. childNodes [element. childNonts. length-1];
4. element. parentNode
-- Reference parent node
5. element. nextSibling; // reference the next sibling Node
Element. previussibling; // reference the previous sibling Node
3. Obtain node Information
6. Obtain the node name from the nodeName attribute.
-- Indicates the tag name returned by the element node. For example, <a herf> <a> Returns ""
-- The property name is returned for the property node. For example, class = "test" returns test
-- The text content returned by the text node
7. nodeType return Node Type
-- Element Node returns 1
-- Attribute node returns 2
-- 3 is returned for the text node.
8. nodeValue: return the value of the node.
-- Element Node returns null
-- The attribute node returns undefined.
-- The text node returns the text content
9. hasChildNodes () determines whether a subnode exists.
10. The tagName attribute returns the Tag Name of the element.
-- This attribute is available only at element nodes. It is equivalent to the nodeName attribute at element nodes.
4. process attribute nodes
11. Each attribute node is an attribute of an element node and can be accessed through (element node. attribute name ).
12. Use the setAttribute () method to add attributes to the element node.
-- ElementNode. setAttribute (attributeName, attributeValue );
-- AttributeName indicates the attribute name and attributeValue indicates the attribute value.
13. Use the getAttribute () method to obtain the attribute value
-- ElementNode. getAttribute (attributeName );
5. process text nodes
14. the innerHTML and innerText attributes are familiar to everyone. If you do not describe them, it is worth noting that both ie and firefox use spaces, line breaks, tabs, and other attributes as text nodes. Generally, when element. childNodes [I] is used to reference a text node:
Copy codeThe Code is as follows:
<Script language "javaScript" type = "text/javascript">
Function cleanWhitespace (element)
{
For (var I = 0; I <element. childNotes. length; I ++)
{
Var node = element. childNodes [I];
If (node. nodeType = 3 &&! /\ S/. test (node. nodeValue ))
{
Node. parentNode. removeChild (node );
}
}
}
</Script>

6. Change the document hierarchy
15.doc ument. createElement () method to create an element node
-- For example, document. createElement ("Span ");
16.doc ument. createTextNode () method to create a text node
-- For example: document. createTextNode (""); // Note: it is not encoded in html. That is to say, it creates a string instead of a space.
17. Use appendChild () to add nodes
-- ParentElement. appendChild (childElement );
18. Use the insertBefore () method to insert a subnode
-- ParentNode. insertBefore (newNode, referenceNode );
-- NewNode is the inserted node, and referenceNode is to insert the inserted node before this
19. Replace the subnode with the replaceChild Method
-- ParentNode. replaceChild (newNode, oldNode );
-- Note: The oldNode must be a child node of the parentNode,
20. Use the cloneNode method to copy nodes
-- Node. cloneNode (includeChildren );
-- IncludeChildren is bool, indicating whether to copy its subnodes.
21. Delete the child node using the removeChild Method
-- ParentNode. removeChild (childNode );
7. Table operations
-- Note: a complete table node cannot be directly inserted into the document in ie.
22. Add rows and cells
Var _ table = document. createElement ("table"); // create a table
Table. insertRow (I); // Insert rows in row I of the table
Row. insertCell (I); // insert a cell at position I of row
23. Reference A Cell Object
-- Table. rows [I]. cells [I];
24. Delete rows and cells
-- Table. deleteRow (index );
-- Row. deleteCell (index );
25. Exchange two rows to obtain the positions of two cells.
Node1.swapNode (node2 );
-- This method will fail in firefox
General method:
Copy codeThe Code is as follows:
Function swapNode (node1, node2)
{
Var _ parent = node1.parentNode;
Var _ t1 = node1.nextSubling;
Var _ t2 = node2.nextSubling;
If (_ t1) parent. insertBefore (node2, _ t1 );
Else _ parent. appendChild (node2 );
If (_ t2) parent. insertBefore (node1, _ t2 );
Else _ parent. appendChild (node1 );