JavaScript变量引用与DOM节点操作机制解析
作者：窗边听雨时间：2026-10-24 21:37:32浏览：124
本文通过数组、对象及函数实例化测试，解析JavaScript中变量按值传递的机制。重点探讨DOM节点操作时引用转移现象，以及IE浏览器中innerHTML清空内容对内存中节点引用的影响，揭示变量引用与内存管理的实际行为。
JavaScript变量引用与DOM节点操作机制解析
进行如下测试：
var a=b=[1,2];
a.push(3);
alert(a.length+' : '+b.length);
分析对节点对象操作所产生的影响：
由于函数参数采用按值传递机制，在插入节点时，传入的是节点本身的引用而非其克隆，因此节点发生了位置转移。
具体示例如下：
<!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"> .c2{ border:1px solid #ccc; width:100px; height:100px;} .c1{ border:2px solid #000; width:50px; height:60px;} </style> </head> <body> <div class="c1" id="div1">div1</div> <div class="c2" id="div2">div2</div> <input type="button" value="append div1 to div2" id="button" /> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
最后涉及节点移除的情况。原本预期在IE浏览器中使用innerHTML=""清空元素内容会彻底从内存中消除创建的节点，但实际情况并非如此，而是出现了一些异常现象：
示例如下：
<!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 id="div2" class="c2"></div> <input type="button" value="add_div" /> <input type="button" value="inner" /> <input type="button" value="remove" /> <input type="button" value="alert" /> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33