javascript - removeChild は 1 回おきにのみ機能します

Question

次の 1 番目の要素を入れて、2 番目の要素を削除しようとしましたが、うまくいきません。例を見てください: http://jsfiddle.net/CZCGG/

Answer 1

の結果getElementsByTagNameは、ライブ ノード リストです。要素を操作すると、疑似配列がリアルタイムで更新されます。

具体的には、ループを回るたびにi値が飛び過ぎています。これは、削除したばかりの要素の後の要素が元の要素のインデックスを持っているためです。

これを解決するには、配列の最後から逆方向に作業する必要があります。これにより、ループの進行中に各要素が元のインデックスを保持することが保証されます。

,シーケンスNode.replaceChildの代わりにも使用する必要がありますinsertBeforeremoveChild

http://jsfiddle.net/alnitak/pfnGX/を参照

var  span = document.getElementsByTagName("span");

for (var i = span.length - 1; i >= 0; --i) {
    var a = document.createElement("a");
    a.href = "http://jsfiddle.net/";
    a.innerHTML = "http://jsfiddle.net/ " + i; 

    var s = span[i];
    s.parentNode.replaceChild(a, s);
}​

Answer 2

ノード リストを操作しています。アイテムを削除するたびに、リストは短くなり、すべてがシャッフルされます...しかし、それでもインデックスをインクリメントしています.

Answer 3

これを試してください、 http://jsfiddle.net/gYwSq/1/

    var  span = document.getElementsByTagName("span");
    for(i=0; span.length!=0; i++){
       var a = document.createElement("a");
       a.href = "http://jsfiddle.net/";
       a.innerHTML = "http://jsfiddle.net/ " + i; 
       span[0].parentNode.insertBefore(a, span[0]);
       span[0].parentNode.removeChild(span[0]);
    }​