操縱DOM數據而不影響視圖

<!DOCTYPE html> 
<html><body> 

<p id="intro">Hello <em id="abcd">intro</em> World!</p> 

<script type="text/javascript"> 
var txt=document.getElementById("intro").innerHTML; 
var el = document.createElement("span"); 
el.innerHTML = txt; 
var aa = el.getElementById("abcd").innerHTML; 
alert(aa); 
</script> 
</body></html>

以上是一個簡單的片段。其實我有一個HTML編輯器，當用戶保存數據時，我應該只保存所需的內容。在這裏，我獲取元素的內容並使用DOM操作它，並將細節傳遞給服務器。這樣，我也不會改變網頁內容（用戶視圖保持不變），他/她將繼續編輯文檔。操縱DOM數據而不影響視圖

上面是一個簡單的例子，但在現實的情況下，我必須刪除，改變和移動的某些元件。上面的代碼失敗el.getElementById("abcd").innerHTML。欣賞任何指針。

來源

2012-08-31 Dominic

爲什麼你不只是元素添加到文檔，但使用樣式'顯示：none'那麼你可以操縱它，然後將其刪除 – Scott

阿好，我明白你爲什麼不希望將其添加到頁面中，因爲編號會與現有的編號衝突。忽略我的第一個評論 – Scott

您可以創建一個隱藏的iframe來處理所有的變化，從而創建一個獨立的DOM，然後簡單地拉回到你想要的結果。

var iframe; 
if (document.createElement && (iframe = document.createElement('iframe'))) { 
    iframe.name = iframe.id = "externalDocument"; 
    iframe.className = "hidden"; 
    document.body.appendChild(iframe); 

    var externalDocument; 
    if (iframe.contentDocument) { 
     externalDocument = iframe.contentDocument; 
    } else if (iframe.contentWindow) { 
     externalDocument = iframe.contentWindow.document; 
    } 
    else if (window.frames[iframe.name]) { 
     externalDocument = window.frames[iframe.name].document; 
    } 

    if (externalDocument) { 
     externalDocument.open(); 
     externalDocument.write('<html><body><\/body><\/html>'); 
     externalDocument.close(); 

     /* Run your manipulations here */ 
     var txt = document.getElementById("intro").innerHTML; 
     var el = document.createElement("span"); 
     el.innerHTML = txt; 

     /* Attach your objects to the externalDocument */ 
     externalDocument.body.appendChild(el); 

     /* Reference the externalDocument to manipulate */ 
     var aa = externalDocument.getElementById("abcd").innerHTML; 
     alert(aa); 
    } 

    /* Completed manipulation - Remove iFrame */ 
    document.removeChild(iframe); 
}

我有工作在這裏： http://jsfiddle.net/ucpvP/

來源

2012-08-31 08:59:20 Scott

我要嘗試這個概念。此外，我需要每次刪除此iframe。希望這適用於所有瀏覽器。 – Dominic

我已經在末尾添加代碼事後刪除iframe中。它應該適用於所有瀏覽器。 – Scott

嘗試使用jQuery像下面給出。

function SaveData() //Your add function 
    { 
     var txt=$("#intro").html(); 
     $(document).append("<span id='abcd'>" + txt+ "</span>"); 
     var aa = $("#abcd").hmtl(); 
     alert(aa); 
    }

來源

2012-08-31 09:01:36

您可以使用從不附加到DOM的DOM元素。我用這個「清理」功能：

function cleanup(str){ 
    var tester = document.createElement('div'), 
     invalid, result; 
    tester.innerHTML = str; 

    //elements I don't allow 
    invalid = tester.querySelectorAll('script,object,iframe,style,hr,canvas'); 

    // the cleanup (remove unwanted elements) 
    for (var i=0;i<invalid.length;(i+=1)){ 
     invalid[i].parentNode.removeChild(invalid[i]); 
    } 

    result = tester.innerHTML; 
    tester = invalid = null; 

    //diacritics to html-encoded 
    return result.replace(/[\u0080-\u024F]/g, 
          function(a) {return '&#'+a.charCodeAt(0)+';';} 
         ) 
       .replace(/%/g,'%25'); 
    } 
    //usage: 
    cleanup(document.getElementById("intro").innerHTML);

你可以用自己的代碼去除，更換和移動的某些元素擴展功能。

來源

2012-08-31 09:12:31 KooiInc

操縱DOM數據而不影響視圖

回答

相關問題