最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js DOM操作时childNodes的空格问题解决方法
时间:2015-08-04 编辑:简简单单 来源:一聚教程网
问题描述:把下面左边的四个节点一次性全部移到右边或把右边的节点一次性移到左边(>>右移,<<左移),
开始的实现是这样的:
MyHtml.html
<select size="4" id="leftSelect"> |
>" id="allToRigth" onclick="allToRigth()"> |
结果:
右移:
再左移:
(问题出现了:在再进行左移时并不能一次性把节点都移到左边)。
这里我我先分析下用 元素.childNodes 得到的节点的空格问题(测试所用浏览器及版本号:chrom 64位,IE11,火狐39.0,Edge);
现在的大部分浏览器在解析childNodes时都会把"#text"(空格,制表符,换行符等一些表示空白文本的符号)当成一个节点,但低版本的IE不会。
所以document.getElementById("leftSelect").childNodes得到的节点个数为9;
(左列表:两块黄色的部分表示一个节点,表示一个节点,有9个节点)
(右列表:两块黄色的部分表示一个节点,有1个节点)
下面是用FireBug调试的过程:
1.开始状态:
注意红色框部分,节点分别是TextNode,option,TextNode,option,TextNode,option,TextNode,option,TextNode.这9个节点(TextNode是空白文本)
2.第一个option节点移到右边后:
注意:在第一个option节点移走后,option后面的节点TextNode补了上来, 但在这次右移过程中这并不影响我们。
在全部节点移到右边后,我们来看左移这部分;
3.开始状态:有5个节点,一个TextNode节点,四个option节点。
4,第一个option节点移到左边后:
看吧,在第一个option节点移到左边后,i=2,后面的option节点补了上来,但补的位置又是已经访问过的位置(i=1)了,这样就造成了节点"遗漏"了,最后变成这样
。
这就是问题的根本原因了。
这里给出其中一个解决方案。
思路:在取孩子节点时我们从最后一个孩子节点开始取,这样即使移走一个孩子节点后,后面的节点补上来也不影响前面孩子节点的位置。
代码实现:
example2.html
>" id="allToRigth" onclick="allToRigth()"> |
这样,无论我们怎样移动都能正常的全部移到一边。
相关文章
- JS去掉前后空格或去掉所有空格的用法 11-02
- JS 去空格trim()最佳实践 03-22
- 空格与英文同时存在js代码 08-29
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31