使用 document.createDocumentFragment() 和 innerHTML 来操作 DOM答案

【问题标题】：using document.createDocumentFragment() and innerHTML to manipulate a DOM使用 document.createDocumentFragment() 和 innerHTML 来操作 DOM
【发布时间】：2012-01-02 09:13:22
【问题描述】：

我正在创建一个文档片段，如下所示：

var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;

变量aWholeHTMLDocument包含一个长字符串，它是一个页面的整个html文档，我想将它插入到我的fragment中，以便动态生成和操作DOM。 p>

我的问题是，一旦我将该字符串添加到frag.innerHTML，它不应该加载该字符串并将其转换为 DOM 对象吗？

设置innerHTML后，我不应该通过属性访问DOM吗？

我尝试了 frag.childNodes 但它似乎不包含任何内容，我只想访问新创建的 DOM。

【问题讨论】：

我不确定任何 DOM 元素的“innerHTML”（文档片段实际上只是一个不能成为 DOM 一部分的 DOM 元素）是否是完整的HTML 文档。如果可能的话，您的问题的答案是“是”。
你只做一次 .innerHTML 而不是 .appendChild(frag) 。它比创建文档片段更快，因为字符串处理更快。
证明：jsperf.com/fragments-vs-html-strings

标签： javascript dom dom-manipulation

【解决方案1】：

你can't set the innerHTML of a document fragment 就像你对普通节点所做的那样，这就是问题所在。添加标准 div 并设置其 innerHTML 是常见的解决方案。

【讨论】：

那么您的意思是我应该执行以下操作？ var aWholeHTMLDocument = '
hello world
'; var div = document.createElement('div'); div.innerHTML = 一个WholeHTMLDocument；这将删除除
之外的所有内容...
@Loic - 他从来没有说过这样的话......他只是解释了你的错误。绝对不推荐您在评论中建议的解决方案。

【解决方案2】：

使用文档片段，您可以附加使用document.createElement('yourElement') 创建的元素。 aWholeHTMLDocument 只是文字。此外，除非您使用框架，否则我不确定您为什么需要创建整个 HTML 文档，只需使用 <body> 标记内的内容即可。

【讨论】：

这是一个 Firefox 插件。我将 aWholeHTMLDocument 放入 iFrame，但我需要它完整，而不仅仅是标签，标签还包含感兴趣的东西，我想保持整个 DOM 完整。
@Loic 那么你想要的是获得对iframe 的引用并将其innerHTML 设置为aWholeHTMLDocument

【解决方案3】：

对于 Firefox 插件，使用 document.implementation.createHTMLDocument 方法可能更有意义，然后从提供给您的 DOM 中获取。

【讨论】：

【解决方案4】：

我知道这个问题很老了，但我在玩文档片段时遇到了同样的问题，因为我没有意识到我必须向它附加一个 div 并使用 div 的innerHTML 来加载 HTML 字符串并从中获取 DOM 元素。我有其他关于如何做这类事情的答案，更适合整个文档。

在 firefox (23.0.1) 中，设置文档片段的 innerHTML 属性似乎不会自动生成元素。只有在将片段附加到文档之后才会创建元素。

要创建整个文档，请使用document.implementation 方法（如果它们受支持）。我已经在 Firefox 上成功了，但我还没有在其他浏览器上真正测试过。您可以查看 AtropaToolbox 中的 HTMLParser.js 以获取使用 document.implementation 方法的示例。我已经使用这段脚本来处理XMLHttpRequest 页面并对其进行操作或从中提取数据。虽然页面中的脚本没有执行，但这是我想要的，虽然它可能不是你想要的。我使用这种相当冗长的方法而不是尝试直接使用 XMLHttpRequest 对象提供的解析的原因是当时我遇到了很多解析错误的麻烦，我想指定文档应该是被解析为 HTML 4 过渡，因为它似乎采取了各种 slop 并生成 DOM。

还有一个DOMParser 可用，您可能更容易使用它。 Eli Gray 在 MDN 的页面上有一个针对没有 DOMParser 但支持 document.implementation.createHTMLDocument 的浏览器的实现。 DOMParser 的规范指定不执行页面中的脚本，并且呈现 noscript 标记的内容。

如果您确实需要在页面中启用脚本，您可以创建一个高度为 0、宽度为 0、无边框等的 iFrame。它仍然会在页面中，但您可以很好地隐藏它。

您还可以选择使用window.open() 和document.write、DOM 方法或任何您喜欢的方法。现在有些浏览器甚至允许你做数据 URI。

var x = window.open( 'data:text/html;base64,' + btoa('<h1>hi</h1>') );
// wait for the document to load. It only takes a few milliseconds
// but we'll wait for 5 seconds so you can watch the child window
// change.
setTimeout(function () {
    console.log(x.document.documentElement.outerHTML);
    x.console.log('this is the console in the child window');
    x.document.body.innerHTML = 'oh wow';
}, 5000);

因此，您确实有一些选项可以在屏幕外/隐藏创建整个文档并对其进行操作，所有这些都支持从字符串加载文档。

还有phantomjs，这是一个很棒的项目，它产生了一个基于 webkit 的无头可编写脚本的网络浏览器。您将可以访问本地文件系统，并且几乎可以做任何您想做的事情。我真的不知道您要通过整页脚本和操作来完成什么。

【讨论】：

【解决方案5】：

使用 querySelector() 来获取文档片段的子项（您可能想要正文，或者正文的某个子项）。然后获取innerHTML。

document.body.innerHTML = aWholeHTMLDocument.querySelector("body").innerHTML

或

aWholeHTMLDocument.querySelector("body").childNodes;

见https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment.querySelector

【讨论】：

【解决方案6】：

使用appendChild

见https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

var fragment = document.createDocumentFragment();
... fragment.appendChild(some element);
document.querySelector('blah').appendChild(fragment);

【讨论】：

这不能解决“进程字符串”问题。

【解决方案7】：

虽然DocumentFragment 不支持innerHTML，但<template> 支持。

<template> 元素的content 属性是DocumentFragment，因此其行为方式相同。例如，您可以这样做：

var tpl = document.createElement('template');
tpl.innerHTML = '<tr><td>Hello</td><td>world</td></tr>';
document.querySelector('table').appendChild(tpl.content);

上面的例子很重要，因为你不能用innerHTML 和例如。 <div>，因为 <div> 不允许 <tr> 元素作为子元素。

注意：DocumentFragment 仍会剥离 <head> 和 <body> 标记，因此它也不会执行您想要的操作。你真的需要创建一个全新的Document。

【讨论】：

真的，这应该是公认的答案，因为它也提供了一个非常好的解决方案。 @Chowey：table 中的 tr 元素存在于 thead、tbody 或 tfoot 中。

【解决方案8】：

DocumentFragment 继承自 Node，但不继承自包含 .innerHTML 属性的 Element。

在你的情况下，我会使用<template> 标签。 In 继承自 Element，它有一个漂亮的 HTMLTemplateElement.content 属性，可以为您提供 DocumentFragment。

这是一个您可以使用的简单辅助方法：

export default function StringToFragment(string) {
    var renderer = document.createElement('template');
    renderer.innerHTML = string;
    return renderer.content;
}

【讨论】：

【解决方案9】：

这是一个将 HTML 字符串转换为 DOM 对象的解决方案：

let markup = '<!doctype html><html><head></head><body><h1>hello world</h1></body></html>';
let range = document.createRange();
let fragment = range.createContextualFragment(markup); //Creates a DOM object

字符串不必是完整的 HTML 文档。

【讨论】：

hello world

之外的所有内容...