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的优点

回答

相关问题