JavaScript中变量的相互引用

时间:2020-05-12 人气:0

测试如下：

关于对节点对象操作产生的影响：

由于是函数是按值传递，所以在插入节点时，引用的是节点本身，而不是它的一个克隆，所以节点被转移了

如：

最后一个是关于节点的移除的，本来以为用innerHTML=""来移除元素内容的话，在IE中会把创建的节点从内存中彻底消除，事实并非如此，而是产生了很奇怪的现象：

如：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
body{ 
font-family:"微软雅黑","Times New Roman", Times, serif; 
font-size:12px;} 
.c2{ 
border:1px solid #ccc; 
width:500px; 
height:150px;} 
.c1{ 
border:2px solid #000; 
width:300px; 
height:100px;} 
.c3{ 
border:1px solid #ccc; 
width:100px; 
height:50px;} 
</style> 
</head> 
<body> 
<p>来回重复点击add_div和inner试试，会发现奇怪的现象。点击alert，又会发现创建的div没从内存清除。
用removeChild方法会很正常的表现</p> 
<div></div> 
<input type="button" value="add_div" /> 
<input type="button" value="inner" /> 
<input type="button" value="remove" /> 
<input type="button" value="alert" /> 
<script type="text/javascript"> 
if(!+"\v1"){}else alert("请在IE下测试"); 
var elem=document.createElement("div"); 
elem.className="c1"; 
elem.innerHTML="creatediv c1"; 
var elem2=document.createElement("div"); 
elem2.className="c3"; 
elem2.innerHTML="creatediv c3"; 
elem.appendChild(elem2); 
var div2=document.getElementById("div2"); 
var inputs=document.getElementsByTagName("input"); 
inputs[0].onclick=function(){div2.appendChild(elem);}; 
inputs[1].onclick=function(){div2.innerHTML=""}; 
inputs[2].onclick=function(){div2.removeChild(elem)}; 
inputs[3].onclick=function(){alert(elem+elem2)}; 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容