Solution of childnodes space problem in JS DOM operation

Problem Description: Move the four nodes below to the right one at a single point or move the node to the right at once to the left (>> move right,<< left),

The beginning of the implementation is this:

Results:



Move right:




 

Move left again:




 

(Problem arises: You cannot move nodes to the left at once when you move to the left).

Here I am first to analyze the use of elements. ChildNodes The space Problem of the node (test browser and version number: Chrom 64 bits, IE11, Firefox 39.0,edge);

Most browsers now parse the ChildNodes "#text" (Spaces, tabs, line breaks, and so on some symbols that represent blank text) as a node, but the lower version of IE does not.

So document.getElementById ("Leftselect"). The number of nodes obtained by ChildNodes is 9;




 

(Left list: Two yellow sections representing one node, one node, 9 nodes)




 

(Right list: Two yellow sections representing one node, with 1 nodes)

The following is the process of debugging with Firebug:

1. Starting state:




 

Note The Red box section, the node is textnode,option,textnode,option,textnode,option,textnode,option,textnode. These 9 nodes (Textnode is blank text)

2. The first option node moves to the right after:




 

Note: After the first option node is removed, the node after option is textnode up, but this does not affect us during this right shift.

After all the nodes have been moved to the right, let's look at this part of the left shift;

3. Start Status: 5 nodes, one textnode node, four option nodes.




 

4, the first option node is moved to the left:




 

See, after the first option node is moved to the left, i=2, the option node is back up, but the fill position is already visited location (I=1), which caused the node "omission", and finally become so




 

。

This is the root cause of the problem.

One of the solutions is given here.

Train of thought: we pick up the child node from the last child node, so that even after the removal of a child node, the subsequent node to fill up does not affect the position of the Front child node.

Code implementation:



So, no matter how we move, we can move all the way to the side.