トラブル：複数のリンクをJavascript経由でiFrameに置き換える

Question

javascriptを使用してページを解析して、特定のクラスに属するリンクをiframeに置き換えて、対応するwikipediaページを開くようにしています。結果]。この関数はリンクを適切に検出しますが、replaceChild（）アクションによって次のインスタンスをスキップします。最初の置換を行った場合と同様に、次のリンクはおそらくループ。

たとえば、ページにリンクが2つある場合、最初のページは解析され、2番目のページは表示されませんが、3がある場合、最初の2つは1番目と3番目の属性を使用して解析されます。

カウント機能に依存しないリンクを繰り返す方法を提案する人はいますか？おそらく配列にそれらを追加しますか？

サンプルthe MDN documentationによると

<a href="http://www.foo.com/" class="myspeciallinks" data-searcht="the hoover damn">wiki it</a> 

サンプルのJavascript

(function(){  
    var lnks = document.getElementsByTagName("a"); 
    for (var i = 0; i < lnks.length; i++) {  
     lnk = lnks[i]; if(lnk.className == "myspeciallinks"){  
      newif=document.createElement("iframe"); 
      newif.setAttribute("src",'http://www.wikipedia.com'); 
      newif.style.width="500px"; 
      newif.style.height="100px"; 
      newif.style.border="none"; 
      newif.setAttribute("allowtransparency","true"); 
      lnk.parentNode.replaceChild(newif,lnk);  
     } 
    } 
})(); 

Answer 1

ここでの問題は、document.getElementsByTagNameが配列ではなくNodeListを返すことです。 NodeListはまだ実際のDOMに接続されていますが、安全にエントリを繰り返し処理することはできませんし、同時にDOMからエントリを削除することもできません。

あなたは配列にNodeListオブジェクトを変換し、反復のためのアレイを使用する必要があります。

(function(){  
    var lnksNodeList = document.getElementsByTagName("a"); 
    // create an array from the above NodeList and use for iteration: 
    var lnks = Array.prototype.slice.call(lnksNodeList); 
    for (var i = 0; i < lnks.length; i++) {  
     var lnk = lnks[i]; 
     if (lnk.className == "myspeciallinks") {  
      var newif = document.createElement("iframe"); 
      newif.setAttribute("src", 'http://www.wikipedia.com'); 
      newif.style.width = "500px"; 
      newif.style.height = "100px"; 
      newif.style.border = "none"; 
      newif.setAttribute("allowtransparency", "true"); 
      lnk.parentNode.replaceChild(newif, lnk);  
     } 
    } 
})(); 

Answer 2

リンク：

は、指定されたタグ名を持つ要素のリストを返します。要素自体を除いて、指定された要素の下にあるサブツリーが検索されます。返されるリストはライブです。つまり、自動的にDOMツリーで更新されます。したがって、element.getElementsByTagNameを同じ要素と引数で複数回呼び出す必要はありません。

したがって、aを交換するたびにコレクションが縮小されます。置き換えを行うたびに、ループをデクリメントiに変更することができます。