.replaceNode(); 잘못된 노드 교체

Question

이 질문을 수정하고 다시 작성하는 것은 이번이 세 번째입니다. 코드를 디버깅 할 때마다 문제에 대한 새로운면을 계속 발견합니다. 나는이 게시물을 읽으려면 약간의 고통이 없도록 조직하려고 노력할 것이다.

A. <object> 노드를 For 루프를 통해 으로 바꿀 때 루프가 "개체"의 첫 번째 인스턴스를 바꿉니다. 노드를 누른 다음 중지하십시오. 이후 모든 콘텐츠가 누락됩니다.

B. <object> 노드를 다른 태그 (예 : <p> 또는 <button>)로 바꾸려고하면이 문제를 격리하려고 할 때 태그에 인접 요소가 포함됩니다.

다음은 해당 for 루프의 샘플입니다. 최종 목표는 YouTube <object> 노드를 찾아서 YouTube 등가물로 찾아 교체하는 것입니다. 그러나 현재 문제를 설명하기 위해 더미 요소 (이 경우에는 버튼)를 사용하고 있습니다.

article.content = items[n].querySelector("description").textContent; 
      //Test to parse the article content into HTML. 
      var HTMLParser = new DOMParser(); 
      var htmlArticleContent = HTMLParser.parseFromString(article.content, "text/html"); 
      //Test Video Script Editor 
      var objectPoll = htmlArticleContent.getElementsByTagName("object"); 
      var numberOfObjects = objectPoll.length; 
      for (var j = 0; j < numberOfObjects; j += 1) { 
       if (objectPoll[j] != null) { 
        var videoEmbed = htmlArticleContent.getElementsByTagName("embed")[j]; 
        if (videoEmbed != null) { 
         var videoSrc = videoEmbed.getAttribute("src"); 
         if (videoSrc.split(".")[1] == "youtube") { 

          var newSrc = videoSrc.replace("/v/", "/embed/"); 
          var iFrame = document.createElement("iframe"); 
          iFrame.setAttribute("src", newSrc); 
          iFrame.setAttribute("height", objectPoll[j].getAttribute("height")); 
          iFrame.setAttribute("width", objectPoll[j].getAttribute("width")); 
          iFrame.setAttribute("frameborder", "0"); 
          iFrame.setAttribute("allowfullscreen"); 
          iFrame.setAttribute("type", "text/html"); 
          iFrame.setAttribute("iv_load_policy", "3"); 
          var test = document.createElement("button"); 
          objectPoll[j].replaceNode(test); 
         } 
         else { } 
        } 
       } 
      } 

대신, 여기에 최종 결과는 DOM 탐색기에서이다 :

<button> 
<br> 
<br> 
<font size="3"><b>WoW Stream 2</b></font><br> 
<br> 
<object width="682" height="416" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow_2" type="application/x-shockwave-flash" bgcolor="#000000"> 
<param name="allowFullScreen" value="true"> 
<param name="allowScriptAccess" value="always"> 
<param name="allowNetworking" value="all"><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf"><param name="flashvars" value="hostname=www.twitch.tv&amp;channel=wow_2&amp;auto_play=player&amp;start_volume=25"></object> 
</button> 

어떻게 든, replaceNode()는 HTML 완전히 잘못된 부분을 감싸는된다. 개체 위치가 getElementsByTagName()을 통해 잘못 인덱싱되는 것이 우려됩니다.

다음은 WinJS.xhr을 통해 외부 사이트에서 제공되는 원본 HTML의 작은 샘플입니다. 나는 그것이 통증인지 이해합니다. 나는 처음 세 객체 태그를 분리하고 줄 바꿈으로 구분했다.

<img src="http://media.mmo-champion.com/images/news/2011/november/d3.png" style="margin-bottom:-2px; margin-right:0px; vertical-align:bottom" /> 
    <b><a href="http://www.diablofans.com/news/1413-uber-bosses-speed-kill-video-blue-posts-bonus-blizzard-comic-contest-entry-black-ops-2-outsells-harry-potter-and-star-wars/" target="_blank">Uber Bosses Speed Kill Video, Blue Posts, Bonus Blizzard Comic Contest Entry, Black Ops 2 Outsells Harry Potter and Star Wars</a></b><br /> <br /> 
    <font size="3"><b>Battle.net World Championship</b></font><br /> <br /> 
    <div style="text-align: center;"><font size="3"><b>WoW Main</b></font><br /> <br /> 

    <object type="application/x-shockwave-flash" height="416" width="682" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow" bgcolor="#000000"><param name="allowFullScreen" value="true" /> 
    <param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /> 
    <param name="flashvars" value="hostname=www.twitch.tv&amp;channel=wow&amp;auto_play=false&amp;start_volume=25" /> 
</object> 

    <br /> <br /> <font size="3"><b>WoW Stream 2</b></font><br /> <br /> 

    <object type="application/x-shockwave-flash" height="416" width="682" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=wow_2" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /> 
    <param name="flashvars" value="hostname=www.twitch.tv&amp;channel=wow_2&amp;auto_play=player&amp;start_volume=25" /> 
</object> 

    </div><br /> <br /> <font size="3"><b>Patch 5.1 - Loss of Control Alerts</b></font><br /> Patch 5.1 adds alerts when you lose control of your character to the default UI. They tell you what is affecting your character and the remaining duration. <br /> <br /> 
    <div style="text-align: center;"> 

    <object width="853" height="480"><param name="movie" value="http://www.youtube.com/v/PbIAuqwFC-Q?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/PbIAuqwFC-Q?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true"></embed> 
</object> 

    <br /> <br /> 
    <a href="http://media.mmo-champion.com/images/news/2012/november/alertOptions.jpg" target="_blank"><img src="http://media.mmo-champion.com/images/news/2012/november/thumb/alertOptions.jpg" border="0" alt="" /></a> <a href="http://media.mmo-champion.com/images/news/2012/november/alerts.jpg" target="_blank"> 
    <img src="http://media.mmo-champion.com/images/news/2012/november/thumb/alerts.jpg" border="0" alt="" /></a> </div><br /> <br /> <font size="3"><b>Popular Glyphs</b></font><br /> Guildox recently added a new feature that will show you which glyphs are popular with the top 5% of players, broken down by PvP and PvE. If you are looking for the <a href="http://www.guildox.com/go/g.asp?c=8&amp;r=&amp;w=&amp;a=24&amp;n=&amp;e=pve" target="_blank">popular glyphs</a> for your class, this should help!<br /> <br /> <div style="text-align: center;">