有一不解，以下结果为什么不对？for( var i = 0; i < o.childNodes.length; i ++ ){ alert( "childNode:" + o.childNodes[ 0 ].outerHTML

Question

把问题描述清楚。alert( "childNode:" + o.childNodes[ 0 ].outerHTML );
                                    ^
你的目的是循环childNodes还是一直打印childNodes[0]

Answer 1

抱歉，我的目的是：
for( var i = 0; i < o.childNodes.length; i ++ ){ 
    // 按常规思考，这样就循环把o的子节点添加到n
    // 但这个方法是错误的
    n.appendChild( o.childNodes[ i ] );
}下面这样是可以的：
for( var i = o.childNodes.length; i > 0; i -- ){
    n.appendChild( o.childNodes[ 0 ] );
}
但，这个我不解：
o.childNodes会自动删除吗？
1、每o.childNodes[ 0 ] 一次就删除自身吗？
2、还是被appendChild，就会删除自身？
3、alert( o.childNodes[ 0 ].outerHTML )，是undefined，那么它是什么，为什么会有这个数组？

Answer 2

用o.childNodes[i]每o.childNodes[ 0 ] 一次就删除自身吗？不是的，你又没有操作o.childNode

Answer 3

for( var i = 0; i < o.childNodes.length; i ++ ){ 
    // 按常规思考，这样就循环把o的子节点添加到n
    // 但这个方法是错误的
    n.appendChild( o.childNodes[ i ] );
}这种方法是错误的，
并且o下面的子节点会自动消失。

Answer 4

o.childNodes会自动删除吗？
1、每o.childNodes[ 0 ] 一次就删除自身吗？
a:你没删除，一般情况下，不会被收集回去的。2、还是被appendChild，就会删除自身？
a:也不会3、alert( o.childNodes[ 0 ].outerHTML )，是undefined，那么它是什么，为什么会有这个数组？
a:1.有可能这个节点是空节点，即空白节点，
为什么会有这个数组？
------------------
指o.childNodes[ 0 ].outerHTML这个？这个是集合，为子节点集合中的第一个孩子。

Answer 5

for( var i = o.childNodes.length; i > 0; i -- ){
    n.appendChild( o.childNodes[ 0 ] );
}
奇怪的是这个，o.childNodes[ 0 ]  为什么每循环一次就不一样？会自动移动类似的“指针”玩意吗？
3、alert( o.childNodes[ 0 ].outerHTML )，是undefined，那么它是什么，为什么会有这个数组？这个明白了。可能空节点的原因。

Answer 6

for( var i = o.childNodes.length; i > 0; i -- ){
n.appendChild( o.childNodes[ 0 ] );
}
奇怪的是这个，o.childNodes[ 0 ] 为什么每循环一次就不一样？会自动移动类似的“指针”玩意吗？o.childNodes[ 0 ] 为什么每循环一次就不一样？你怎么知道不一样？
for( var i = o.childNodes.length; i > 0; i -- ){
alert(o.childNodes[0].innerHTML)      //你看看他变了没有，你要调试呀n.appendChild( o.childNodes[ 0 ] );
}

Answer 7

如：
<div id="t1">11111111111111
<div id="t2">2222222222</div>
</div>
<script language="javascript">
var o = document.getElementById( 't1' );
var t = document.createElement( 'DIV' );
for( var i = o.childNodes.length; i > 0; i -- ){
t.appendChild( o.childNodes[ 0 ] );
}
alert( "t:" + t.outerHTML );
alert( "t1:" + t1.innerHTML );   //这就变空了？？？？
</script>

Answer 8

>>  //你看看他变了没有，你要调试呀谢谢你的指点。
但这就是我的调试：
n.appendChild( o.childNodes[ 0 ] );每次appenChild 都能添加不同的元素，o.childNodes[ 0 ]当然是不同的了。
o.childNodes[ 0 ].outerHTML，我也试过了。

Answer 9

t1？哪有t1？
alert( "t1:" + document.getElementById( 't1' ).innerHTML ); //看看这个
//你先把基本的逻辑搞清楚
//var t = document.createElement( 'DIV' );只是创建，你没给他放到heml里面去

Answer 10

铭轩：
    非常感谢你的指点，但你的回答和我题目的本义基本不同。<div id="t1">11111111111111
<div id="t2">2222222222</div>
</div>
alert( "t1:" + t1.innerHTML );
这个就是t1，正确的写当然是：document.getElementById( 't1' ).innerHTML
但结果是是一样的。>>
//你先把基本的逻辑搞清楚
//var t = document.createElement( 'DIV' );只是创建，你没给他放到heml里面去和这个是无关的。我要解决的是：
t.appendChild( o.childNodes[ 0 ] );
为什么会使：
<div id="t1">11111111111111
<div id="t2">2222222222</div>
</div>
里的：
11111111111111
<div id="t2">2222222222</div>
变没了？我要了解和探讨的是这个为什么？不是学习语法。

Answer 11

我个人理解
o.childNodes[0]在o子对象中只有一份实体，
t.appendChild只是把实体的引用(就是你说的指针)转移到t的子对象中我试过IE的结果就是把o中的childNode移到t中

Answer 12

知道你们在吵什么了，appendChild是这样的，如果将要添加的是一新元素，当然这个效果大家都能理解，但如果要添加的是一已经在页面存在的元素，这时就相当于move了，这样说应该够明白了吧。

Answer 13

但如果要添加的是一已经在页面存在的元素，这时就相当于move了，这样说应该够明白了吧。明白了，但这个设计好象不怎么合理。

Answer 14

如果觉得别扭，就用t.appendChild( o.removeChild(o.childNodes[0]) );