javascript中的动态节点列表的危险处理

什么叫节点列表：

<script> var x=document.getElementsByTagName("p"); </script>

中x这样的就叫做节点列表。

它们是危险的动态结构，为啥？

<a href="#">abc</a> <p>afefefd</p> <script> var x=document.getElementsByTagName("p"); alert(x.length); var par=document.createElement("P"); document.body.appendChild(par); alert(x.length); </script>
上述代码执行结果为：

然后显示。

上述代码中的x只进行了一次定义，在新插入一个p元素前后显示了不同的内容，即时反应了当前文档中的变化，这让我想起C#中的LINQ查询中有个查询，是在foreach语句时才执行，也是能即时反应当前的变化。

为什么说这是危险的呢。

因为比如说：

<p rel="removed">a</p> <p>b</p> <p rel="removed">c</p> <p>d</p> <p rel="removed">e</p> <script> var waitingRoom=document.createElement("removed"); var x=document.getElementsByTagName("p"); for(var i=0;i<x.length;i++) { if(x[i].getAttribute("rel")) { waitingRoom.appendChild(x[i]); } } </script>

这是一段需要移除文档中所有的p标签的。可是因为x是动态的，所以在移除第一个时，x就更新了，x.length就减小1，此时i变成了1，但是文档中剩余的p标签中的首个此时应该是x[0],于是就没法删除它了，同理，第二次删除后，如果p标签很多，那么x[0],x[1]就没法删除了。谁让x那么即时的反应了当前的变化呢，有个解决方案如下：

<p rel="removed">a</p> <p>b</p> <p rel="removed">c</p> <p>d</p> <p rel="removed">e</p> <script> var waitingRoom=document.createElement("removed"); var x=document.getElementsByTagName("p"); for(var i=0;i<x.length;) { if(x[i].getAttribute("rel")) { waitingRoom.appendChild(x[i]); } else { i++; } } </script>
<pre name="code" class="javascript"waitingRoom.appendChild(x[i]);

方法会把节点x[i]从当前的位置剪切到waitingRoom中，也就相当于删除。当删除后，i不变化，当前节点不应该删除时才i++。这样就可以有效的删除所有带rel="removed"的元素了