七零部落格
思则大道至简，疑则谜团重重！
思则大道至简，疑则谜团重重！
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好呢?
再看下下面的代码.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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
优点:不产生碎片,方便高效. 缺点:被移除的对象不能再次使用,会涉及到兼容性的问题.