DOM--childNodes的空格问题

今天在帮人解决DOM节点问题时,把遇到的childNodes的空格问题在这总结下。

问题大概是这样的:把下面左边的四个节点一次性全部移到右边或把右边的节点一次性移到左边(>>右移,<<左移),

开始的实现是这样的:

<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <script type="text/javascript">
       function allToRigth(){
           var nodes = document.getElementById("leftSelect").childNodes;//得到leftSelect的所有孩子节点
           for(var i = 0; i < nodes.length; i ++){  //遍历所有孩子节点
               if(nodes [i].nodeType == 1){
                   document.getElementById("rightSelect").appendChild(nodes[i]);  //当孩子节点是元素节点时就右移
               }
            }
       }

       function allToLeft(){
           var nodes= document.getElementById("rightSelect").childNodes;//得到rightSelect的所有孩子节点
           for(var i = 0; i < nodes.length; i ++){//遍历所有孩子节点
              if(nodes[i].nodeType == 1){
                  document.getElementById("leftSelect").appendChild(nodes[i]);     //当孩子节点是元素节点时就左移
              }
           }
       }

   </script>
  </head>

  <body>
    <table width="200">
       <td>
           <select size="4" id="leftSelect">
               <option>hadoop</option>
               <option>hbase</option>
               <option>hive</option>
               <option>pig</option>
           </select>
       </td>

       <td>
           <input type="button" value=">>" id="allToRigth" onclick="allToRigth()"><br>
           <input type="button" value="<<" id="allToLeft" onclick="allToLeft()">
       </td>

       <td>
           <select size="4" id="rightSelect">
           </select>
       </td>  

    </table>
  </body>
</html>

结果:

右移:

再左移:(问题出现了:在再进行左移时并不能一次性把节点都移到左边)。

这里我我先分析下用 元素.childNodes 得到的节点的空格问题(测试所用浏览器及版本号:chrom 64位,IE11,火狐39.0,Edge);

现在的大部分浏览器在解析childNodes时都会把"#text"(空格,制表符,换行符等一些表示空白文本的符号)当成一个节点,但低版本的IE不会。

所以document.getElementById("leftSelect").childNodes得到的节点个数为9;

(左列表:两块黄色的部分表示一个节点,<option></option>表示一个节点,有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)了,这样就造成了节点"遗漏"了,最后变成这样

这就是问题的根本原因了。

这里给出其中一个解决方案。

思路:在取孩子节点时我们从最后一个孩子节点开始取,这样即使移走一个孩子节点后,后面的节点补上来也不影响前面孩子节点的位置。

代码实现:

<html>
  <head>
    <title>example2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   <script type="text/javascript">
       function allToRigth(){
           var nodes = document.getElementById("leftSelect").childNodes;//得到leftSelect的所有孩子节点
           for(var i = nodes .length-1; i >=0 ; i --){  //倒着遍历所有孩子节点
               if(nodes [i].nodeType == 1){                   //当孩子节点是元素节点时就插入到rightSelect的第一个孩子节点之前
                     document.getElementById("rightSelect").insertBefore(nodes [i],document.getElementById("rightSelect").firstChild);

               }
            }
       }

       function allToLeft(){
           var nodes = document.getElementById("rightSelect").childNodes;//得到rightSelect的所有孩子节点
           for(var i = nodes .length-1; i >=0 ; i --){     //倒着遍历所有孩子节点
              if(nodes [i].nodeType == 1){                   //当孩子节点是元素节点时就插入到leftSelect的第一个孩子节点之前
                    document.getElementById("leftSelect").insertBefore(nodes [i],document.getElementById("leftSelect").firstChild);
              }
           }
       }

   </script>
  </head>

  <body>
    <table width="200">
       <td>
           <select size="4" id="leftSelect">
               <option>hadoop</option>
               <option>hbase</option>
               <option>hive</option>
               <option>pig</option>
           </select>
       </td>

       <td>
          <input type="button" value=">>" id="allToRigth" onclick="allToRigth()"><br>
          <input type="button" value="<<" id="allToLeft" onclick="allToLeft()">
       </td>

       <td>
       <select size="4" id="rightSelect">
       </select>
       </td>

    </table>
  </body>
</html>

这样,无论我们怎样移动都能正常的全部移到一边。

时间: 2024-10-12 11:59:26

DOM--childNodes的空格问题的相关文章

childNodes详解

定义和用法 childNodes 属性返回节点的子节点集合,以 NodeList 对象. 提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息. 浏览器支持 所有主流浏览器都支持 childNodes 属性. 语法 element.childNodes 技术细节 返回值: NodeList 对象,表示节点集合. DOM 版本 Core Level 1 以上是定义来着w3cschool.com DOM中节点的类型 DOM中一共有12中类型.但是我们

javascript针对DOM的应用

所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果.所以我这里只教大家最实际,最有用的javascript应用.但是前提大家最好有一些javascript或者jquery的编程的基础.好废话不多说了.今天第一篇,就教大家如何用javascript获取页面中的dom元素.这个很重要.我会对照JQuery来讲.如果页面中的元素是ID属性<div id=&qu

关于js封装框架类库之DOM操作模块(二)

上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 1 (function ( window, undefined ) { 2 3 4 var arr = [], 5 push = arr.push, 6 slice = arr.slice, 7 concat = arr.concat; 8 9 // 构造函数 10 var YY = function YY ( selector ) { 11 return new YY.fn.init( selec

childNodes的兼容性问题

元素.childNodes:只读 属性 子节点列表集合 标准浏览器下:包含文本和元素类型节点,也会包含非法嵌套的子节点 非标准浏览器下:只包含元素类型节点,ie7下不会包含非法嵌套的子节点 childNodes只包含一级子节点,不包含后辈孙级节点 我们来看例子: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

HTML基础 DOM概览(第一天)

前面的一句话: DOM内容太多, 只能言简意赅, 深究可以到tcp协议,浏览器内核,计算机图形学等等知识, 慢慢来,让我们螺旋式的方式提高自己吧 开胃菜:      大家知道 contentEditable 是干嘛的吗? 一点思考: 有些牛人在特定时间点钻研DOM和特性, 若干年后, 兼容ie6,7,8成为古文, 一些特别的用法逐渐规范, xxxx研究好多天的问题,对于h5是小菜一碟, 不是我们不行,是DOM的局限性决定的, 着眼于未来. 抬头看看世界,h5来了 语义化标签 绘制: canvas

使用DOM进行xml文档的crud(增删改查)操作&amp;lt;操作详解&amp;gt;

很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这里入下载)导入到Eclipse或MyEclipse. Node和Element的关系 Element是Node的子接口,所以Element的方法要比Node方法要多,这样的话使用起来比较方便,一般情况我们都把节点转换成元素(或者叫标签,即Element); Element是Node的子类型: 比如我

使用DOM进行xml文档的crud(增删改查)操作&lt;操作详解&gt;

很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这里入下载)导入到Eclipse或MyEclipse. Node和Element的关系 Element是Node的子接口,所以Element的方法要比Node方法要多,这样的话使用起来比较方便,一般情况我们都把节点转换成元素(或者叫标签,即Element); Element是Node的子类型: 比如我

基础JavaScript练习(二)总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐

国家电力项目-03

*.hl_mark_KMSmartTagPinkImg{background-color:#ffaaff;}*.hl_mark_KMSmartTagBlueImg{background-color:#99ccff;}*.hl_mark_KMSmartTagYellowImg{background-color:#ffff66;}*.hl_mark_KMSmartTagOrangeImg{background-color:#ffad5b;}*.hl_mark_KMSmartTagGreenImg{b