看《javascript权威指南5》遇到的纠结问题，谁来帮忙解释下，谢谢!


<html>
<head>
    <script type="text/javascript">
         function reverse(n){
    var f=document.createDocumentFragment();
    while(n.lastChild) f.appendChild(n.lastChild)//问题1：此处为什么可以遍历n?
    n.appendChild(f);//问题2：此处为什么会删掉原来的节点，而用新的替换，不是追加么?
}
    </script>
<head>
<body>
    <ul id="num">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <input type="button" onclick="reverse(document.getElementById('num'));" value="reverse ul" />
</body>
</html>
问题1:while循环为什么能遍历ul,lastChild不是只引用最后一个子节点吗？问题2：为什么click button时，显示的是:
four
three
two
one
而不是
one
two
three
four
four
three
two
one

解决方案 »

  1.   

    while(n.lastChild) f.appendChild(n.lastChild)//问题1：此处为什么可以遍历n?
    这里appendChild之后n.lastChild这个节点就移动了（不是复制，请注意），此时n.lastChild就是倒数第二个child。所以循环得之同理得到了 n.appendChild(f)的时候。其实n里面已经没有了节点了
      

  2.   


    Element 对象参考手册
    定义和用法
    appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。不是在最后的节点添加节点吗，怎么反而是删除最后一个节点？？极度抓狂ing...！！！！！！！！！
      

  3.   

    但是你append的是已有的node
    那么就相当于节点move了。
      

  4.   


    while(n.lastChild) f.appendChild(n.lastChild)//问题1：此处为什么可以遍历n?但是我是append到f中啊!f=document.createDocumentFragment();纠结死我了，appendChind就是搞不明白,兔子得救救我啊，不然我今晚别想睡觉了。
      

  5.   

    ...
    appendChild(n.lastChild)可以理解成
    var r = n.lastChild;
    n.lastChild.remove
    appendChild(r);现在明白了？
      

  6.   

    是不是这样，对于已经存在的oldnode,elementNode.appendChild(oldnode),会把这个oldNode转移到elementNode,不管这个elementNode是原来的还是另外一个,而对于不存在的newnode,elementNode.appendChild(newnode)就是在elementNode最后的子节点后追加一个newnode，是这样吧，我真他妈是天才！
      

  7.   

    没感觉有什么难的。
    对于第一个问题。
    lastChild是对其子节点的一个引用，当你remove掉一个节点之后原来
    的倒数第二个就成了lastChild了，所以能够有循环遍历出所有子节点
    一点都不奇怪。如果理解了第一个问题，第二个就自然理解了，因为n已经通过循环被
    删除了所有子节点，所以再追加上肯定就只显示追加后的结果了对于appendChild函数有一点需要注意，appendChild不是将原来的节点
    复制一份追加到另一个节点，而是从原来的节点中移动到指定的节点