代码改变世界

javascript超空间(removeChild和innerHTML区别)

2010-02-23 18:21  BlueDream  阅读(5363)  评论(2)  编辑  收藏  举报

javascript超空间(DOM hyperspace)在ppk谈javascript中出现. 大概是指.当元素不在dom里面,而js又有关联的时候.

元素不会消失,而是保存在一个被称为"超空间"的地方.

书中说了可以用是否存在parentNode来判断元素是否在超空间中.

 <body></body>
 <script type="text/javascript">
 var div = document.createElement('div');
 alert(div.parentNode);
 document.body.removeChild(document.body.appendChild(div));
 alert(div.parentNode);
 </script>

第一次parentNode是null没有问题.正常说由于已经被节点删除了,parentNode应该也为null.但在IE下却是object. 而且这个

object的nodeType为11.说明是一个碎片对象(FRAGMENT).

而且每个被removeChild移除的元素会生成不同的FRAGMENT.也许这就是所说的"超空间"吧?

那么如果用innerHTML去清除呢?

 

<body><div id="test1"></div></body>
 <script type="text/javascript">
 var elm = document.getElementById('test1');
 document.body.innerHTML = '';
 alert(elm.parentNode);
 </script>

 

结果在ie下也是null了.removeChild和innerHTML在IE下清除元素的时候产生了不同的结果.

removeChild每次都会产生碎片(似乎也没什么作用),那是不是用innerHTML就比removeChild好呢?

再看下下面的代码.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    div { border: 1px solid red; height:20px; }
  </style>
 </head>

 <body>
    <span><div id="test1">test1</div></span>
    <span><div id="test2">test2</div></span>
 </body>
 <script type="text/javascript">
 var div1 = document.getElementById('test1'), parent1 = div1.parentNode;
 parent1.removeChild(div1);
 alert(div1.tagName + ":" + div1.innerHTML);
 parent1.appendChild(div1);

 var div2 = document.getElementById('test2'), parent2 = div2.parentNode;
 parent2.innerHTML = "";
 alert(div2.tagName + ":" + div2.innerHTML);
 parent2.appendChild(div2);
 </script>
</html>

当用removeChild时,移除元素的结构并没有发生变化.但使用innerHTML清除时,其他浏览器中被移除的元素的结构和removeChid

是一致的.但在IE下被移除的元素的结构就只剩下外壳了.

用个比喻就是:在IE下removeChild就是掰断树枝,但树枝可以再次使用.而innerHTML就是把所需要的枝叶给拔下来然后把树枝烧掉.

 

结论:

removeChild

优点: 移除后的元素能再次使用,兼容性好.  缺点:IE下会产生多余的碎片

innerHTML

优点:不产生碎片,方便高效.  缺点:被移除的对象不能再次使用,会涉及到兼容性的问题.