DOMParser與模板和innerHTML的優點

我正在尋找處理解析HTML或XHTML（XML序列化）標記並將其插入到網頁的DOM中的最佳方式，該網頁可以是text/html或application/xhtml + XML。不希望使用像jQuery這樣的庫，而只關心與最新版Chrome的兼容性。DOMParser與模板和innerHTML的優點

我看到兩種可能的解決方案。

模板&的innerHTML：

let temp = document.createElement('template'); 
temp.innerHTML = markuptext; 
document.body.appendChild(temp.content);

的DOMParser：

let parser = new DOMParser(); 
let doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + markuptext + '</div>', 'application/xhtml+xml'); 
let frag = document.createDocumentFragment(), childNode; 
while (childNode = doc.documentElement.firstChild) { 
    frag.appendChild(childNode); 
} 
document.body.appendChild(frag);

我希望有人能指出這兩種方法的優勢/劣勢。

With Template & innerHTML我假設Chrome會根據頁面的內容類型選擇解析爲HTML/XML，並且可能沒有辦法改變它。看來模板& innerHTML允許在<tbody>以外的片段如<tr><td></td></tr>，無論它是以HTML還是XML解析。 DOMParser也允許這樣做，但如果它解析爲XML，則只能使用。

來源

2016-05-16 Chris_F

DHTML屬性** innerHTML **是一個功能完備的HTML解析器，它在即時（在所有瀏覽器引擎上）將HTML流序列轉換爲DOM樹時具有高度優化和同等可靠性。作爲獎勵，它也可以對不完整的流進行錯誤更正。 –

@BekimBacaj'「它也可以對不完整的流進行錯誤修正」「我認爲這是一個否定，如果是真的。 –

我認爲這是一種獎勵，因爲唯一的原因是任何種類的數據結構化語言都是實際數據。這就是你感興趣的全部內容，只要你得到你正在追蹤的信息或等待，你根本不在乎它是如何構建的。無論如何，除此之外的任何行爲註定會像xhtml一樣過早死亡。 –

這取決於你的目標是什麼。如果你想只是附加解析後的html/xhtml'，那麼使用.innerHTML，它更容易，通常更快。根據我的經驗，Hovewer經常需要做一些轉換，然後使用dom操作是最好的方法。但是，你應該避免節點附加節點循環到document.body的，因爲它是緩慢和低效，只是創造一些「假」的DOM元素，將節點添加到它的循環，不是附加整個對象：

let div = document.createElement('div'); 
let childNode; 
while (childNode = doc.documentElement.firstChild) { 
    div.appendChild(childNode); 
} 
document.body.appendChild(div);

一個重要的說明，關於試圖找到JS中最有效的解決方案。 JS性能高度依賴於JavaScript引擎，未來將對js的哪些部分進行優化。所以你應該總是寫一些性能測試（或者使用準備好的測試套件），特別是像DOM API這樣的緩慢的「部分」。好消息是，引擎開發人員傾向於傾向於衆所周知的解決方案和「良好實踐」進行優化，通常會留下「不好的部分」。

下面是關於innerHTML的DOM VS一些很好的測試追加： http://andrew.hedges.name/experiments/innerhtml/

追加到DOM，而無需創建 '虛擬' DIV： https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

而更多的技術講解有關.innerHTML，.appendChild，.insertAdjacentHTML 「 "innerHTML += ..." vs "appendChild(txtNode)"

來源

2016-05-16 09:22:59 Jazzman

我使用'DocumentFragment'更新了我的DOMParser代碼，以避免多次附加到document.body。 –

-1

也許一個混合的方法？

var dom = new DOMParser().parseFromString('<template>'+ markuptext +'</template>','text/html').head; 
document.getElementById('my-div').appendChild(dom.firstElementChild.content);

來源

2017-03-09 22:25:15 swann

DOMParser與模板和innerHTML的優點

回答

相關問題