JS DOM operation implementation code

Simple form:

After testing:

I can't figure it out. After reading the relevant information, I found that in JS, spaces are also used as a text node, and there are spaces behind both input elements.
So they are all used as a text node, so the result is 4
After deleting the space, the result is 2
In order to process the space nodes inside, use the following function to handle it

After processing node cleanWhitespace(("TEST")), OK, solve
Also attached:
Basic DOM method
1. Direct reference nodes
(id);
-- Find nodes through id in the document
(tagName);
--Returns an array containing references to these nodes
--For example: ("span"); will return all nodes of type span
2. Indirect reference nodes

--Return all child nodes of element, which can be called in [i]
--=[0];
--=[-1];

--Reference parent node
; //Cite the next brother node
; //Cite the previous brother node
3. Obtain node information
Attribute to get the node name
--The tag name is returned for element nodes, such as: <a herf><a> returns "a"
--The property name is returned for the attribute node, such as: class="test" returns test
--The content of the text is returned for text nodes
Return the type of node
--Element node returns 1
--Attribute node returns 2
--Text node returns 3
Return the value of the node
--Element node returns null
--The attribute node returns undefined
--Text node returns text content
() Determine whether there are sub-nodes
The attribute returns the element's tag name
--This attribute is only available at element nodes, which is equivalent to the nodeName attribute of element nodes
4. Processing attribute nodes
11. Each attribute node is an attribute of the element node and can be accessed through (element node. attribute name)
12. Use the setAttribute() method to add attributes to element nodes
--(attributeName,attributeValue);
--attributeName is the name of the attribute, attributeValue is the value of the attribute
13. Use getAttribute() method to obtain attribute value
--(attributeName);
5. Process text nodes
I believe everyone is familiar with these two methods, and I won't introduce them. It is worth noting that both ie and firefox are prone to treat spaces, line breaks, tab characters, etc. as text nodes. All text nodes are generally referenced through [i], usually deal with:

6. Change the hierarchy of the document
() method creates element node
--For example: ("Span");
() method to create text node
--For example: ("&nbsp;"); //Note: It will not encode through html, that is, what is created here is not a space, but a string&nbsp;
17. Use appendChild() method to add nodes
--(childElement);
18. Use insertBefore() method to insert child nodes
--(newNode,referenceNode);
--newNode is the inserted node, referenceNode is the inserted node before inserting it
19. Use replaceChild method to replace child nodes
--(newNode,oldNode);
--Note: oldNode must be a child node of parentNode,
20. Use the cloneNode method to copy nodes
--(includeChildren);
--includeChildren is bool, indicating whether to copy its child nodes
21. Use removeChild method to delete child nodes
--(childNode);
7. Operation of tables
--Note: A complete table node cannot be inserted into the document directly in ie.
22. Add rows and cells
var _table=("table"); //Create table
(i); //Insert line in the i-th line of the table
(i); //Insert cell at the i-th position of row
23. Reference cell object
--[i].cells[i];
24. Delete rows and cells
--(index);
--(index);
25. Swap two rows to get the position of two cells
(node2);
--This method will error in firefox
General method: