JavaScript 中 NodeList 的动态特性与性能陷阱

NodeList 的动态特性与死循环风险

NodeList 对象始终反映文档的最新状态，其本质是基于 DOM 文档的实时查询结果。例如，以下代码演示了因未正确处理动态集合而导致的无限循环问题：

<script type="text/javascript">
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0;i<divObj.length;i++){
var d=document.createElement("div");
document.body.appendChild(d);
     }
     }
</script>

上述代码首先获取页面中所有的 div 元素。由于 divObj 是一个动态集合，每当有新元素插入页面时，divObj 都会自动更新以包含该新元素。这意味着每次访问 divObj.length 都会触发一次重新查询。在循环中，每次迭代都通过 document.createElement 创建并追加一个新的 div，导致 divObj.length 不断增加。因此，循环条件 i<divObj.length 永远无法变为 false，从而形成死循环。

正确的 NodeList 迭代与性能优化

为了避免此类问题，在迭代 NodeList 时，建议先使用 length 属性初始化一个独立的变量，并在循环条件中与该变量进行比较。参考以下修正后的代码：

<script type="text/javascript">
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0,len=divObj.length;i<len;i++){
var d=document.createElement("div");
document.body.appendChild(d);
     }
     }
</script>

在该示例中，变量 len 在循环开始前被赋值为 divObj.length 的快照。由于 len 的值在循环过程中保持不变，即使后续向文档中追加新的 div 元素，循环次数仍由初始长度决定，从而成功避免了死循环。

总结：为了提升性能并避免逻辑错误，应尽量减少对 NodeList 的直接访问次数。因为每次访问 NodeList 都会触发基于文档的重新查询。最佳实践是将 NodeList 中的值（如长度或具体元素）缓存起来，如示例二所示。