JSDOM operation implementation code. For details about dom operations, refer. Simple Table:
The Code is as follows:
Tested:
The 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
The Code is as follows:
Function cleanWhitespace (element)
{
For (var I = 0; 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" is returned"
-- 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:
The Code is as follows:
