o3.replaceNode( o4 ); o3被替换成o4后，alert( o3.outerHTML )显示的还是原来的o3内容？怎么能让o3的内容也发生变化？

Question

replace 并不是赋值，而是替换彼此在 DOM 树上的位置，兄弟概念有些混淆了吧，
示例如下，效果是否如你所想？<span id="s1">
    <div id="t3">33333333333</div>
</span><script language="JavaScript">var o3 = document.getElementById( 't3' );alert( "o3_1:" + s1.firstChild.outerHTML );
o3.innerHTML = "32323232";
alert( "o3_2:" + s1.firstChild.outerHTML );var o4 = document.createElement( 'DIV' );
o4.innerHTML = "4444444444";// 这里是位置交换，而非赋值！
o3.replaceNode( o4 );alert( "o3_3:" + s1.firstChild.outerHTML );
</script>

Answer 1

<div id="t3">33333333333</div>
<script language="javascript">
var o3 = document.getElementById( 't3' );
alert( "o3_1:" + o3.outerHTML );
o3.innerHTML = "32323232";
alert( "o3_2:" + o3.outerHTML );
var o4 = document.createElement( 'DIV' );
o4.innerHTML = "4444444444";
o3.replaceNode( o4 );o3=o4;  //只需要在这里重新对 o3 进行一次赋值即可。// 这里实际应用中是一个引用使用，没办法直接读取o4元素。
// 如其它地方：this.obj = o3   希望this.obj能随着o3的实际变化而发生变化。
alert( "o3_3:" + o3.outerHTML );
</script>

Answer 2

meizz(梅花雪) 的方法虽然简单，但并未体现出 replace 的位置替换本质。
而真正体现 Dom 树上位置的是索引。以下一例就是用索引实现同样效果：<div id="t3">33333333333</div><script language="JavaScript">// 获取给定节点相对其父节点的索引值。
function getNodeIndex(givenNode)
{
    var pNode = givenNode.parentNode;
    var childNodesLength = pNode.childNodes.length;
    for (var i=0; i<childNodesLength; i++)
    {
        if (pNode.childNodes(i)==givenNode)
        {
            return i;
        }
    }
    return -1;    
}var o3 = document.getElementById( 't3' );var pNode = o3.parentNode;
// o3之前不增加新节点，若增加了新节点需要重新计算该值。
var nodeIndex = getNodeIndex(o3);
// 现在是对 o3 的引用。
var targetNode = pNode.childNodes(nodeIndex);alert( "o3_1:" + targetNode.outerHTML );
o3.innerHTML = "32323232";
alert( "o3_2:" + targetNode.outerHTML );var o4 = document.createElement( 'DIV' );
o4.innerHTML = "4444444444";// 这里是位置交换，而非赋值！
o3.replaceNode( o4 );alert( "o3_3:" + targetNode.outerHTML ); // 仍然是对 o3 的引用。// 关键一步：重新为 targetNode 赋值。赋值后是对 o4 的引用。
targetNode = pNode.childNodes(nodeIndex);
alert( "o4_1:" + targetNode.outerHTML );
</script>

Answer 3

var nodeIndex = getNodeIndex(o3);
// 现在是对 o3 的引用。
var targetNode = pNode.childNodes(nodeIndex);
……
这中间，是一个未知的操作，包括可能增加新节点
所以，getNodeIndex的计算办法并不可行。
……
targetNode = pNode.childNodes(nodeIndex);

Answer 4

我完整的应用是这样，希望obj.t永远都是o3的内容，不管o3被替换了，还是被更改了内容：
<div id="t3">33333333333</div>
<script language="javascript">
var obj = new Object( );
var o3 = document.getElementById( 't3' );
obj.t = o3;
alert( "o3_1:" + obj.t.outerHTML );
o3.innerHTML = "32323232";
alert( "o3_2:" + obj.t.outerHTML );
var o4 = document.createElement( 'DIV' );
o4.innerHTML = "4444444444";
o3.replaceNode( o4 );
o3 = o4;
alert( "o3_3:" + obj.t.outerHTML );
</script>