DOM Basic Method

Direct reference 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:
<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:
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 );
}


Delete all blank nodes:
<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>
Nodetype = 3 the node type is text \ s to match all white spaces
Insert a node into a specified index
Function insertAt (parentNode, newNode, index)
{
If (! ParentNode. hasChildNodes ())
{
ParentNode. appendChild (newNode );
Return newNode;
}
// Use try to capture exceptions that do not exist in the Index
Try {
ParentNode. insertBefore (newNode, parentNode. childNodes [index]);
}
Catch (e ){
Return null;
}
Return newNode;