本文深入解析 JavaScript 中 NodeList 的动态特性。由于 NodeList 是实时查询的 DOM 集合，在遍历过程中修改 DOM 会导致每次访问 length 属性时重新计算，极易引发无限循环。文章通过对比错误与正确的迭代写法，强调缓存 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 中的值（如长度或具体元素）缓存起来，如示例二所示。