Loi*_*ros 32 javascript dom dom-manipulation
我正在创建一个文档片段如下:
var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;
变量aWholeHTMLDocument包含一个长字符串,它是页面的整个html文档,我想将它插入到我的片段中,以便动态生成和操作dom.
我的问题是,一旦我将该字符串添加到frag.innerHTML,它不应该加载此字符串并将其转换为DOM对象吗？设置innerHTML后,我不应该通过属性访问DOM吗？我尝试了frag.childNodes但它似乎没有包含任何东西,而我想要的只是访问新创建的DOM.
Joh*_*han 25
您不能像使用普通节点那样设置文档片段的innerHTML,这就是问题所在.添加标准div并设置innerHTML是常见的解决方案.
cho*_*wey 21
虽然DocumentFragment不支持innerHTML,<template> 不.
元素的content属性<template>是一样的,DocumentFragment所以它的行为方式相同.例如,你可以这样做:
var tpl = document.createElement('template');
tpl.innerHTML = '<tr><td>Hello</td><td>world</td></tr>';
document.querySelector('table').appendChild(tpl.content);
上面的例子很重要,因为你不能用innerHTML和例如a <div>,因为a <div>不允许<tr>元素作为子元素.
注意: A DocumentFragment仍将剥离<head>和<body>标记,因此它也不会执行您想要的操作.你真的需要创造一个全新的Document.
pek*_*aaw 12
DocumentFragment继承自Node，但不是来自Element包含该.innerHTML属性的。
在你的情况下，我会使用<template>标签。In 继承自Element，它有一个漂亮的HTMLTemplateElement.content属性，可以给你一个DocumentFragment.
这是您可以使用的简单辅助方法：
export default function StringToFragment(string) {
var renderer = document.createElement('template');
renderer.innerHTML = string;
return renderer.content;
}
我知道这个问题很旧，但是我在玩文档片段时遇到了同样的问题，因为我没有意识到我必须向其添加div并使用div innerHTML来加载HTML字符串并从中获取DOM Elements。它。关于如何做这种事情，我还有其他答案，更适合整个文档。
在firefox（23.0.1）中，似乎设置文档片段的innerHTML属性不会自动生成元素。仅在将片段附加到文档之后，才创建元素。
要创建整个文档，请使用document.implementation受支持的方法。我已经在Firefox上成功完成此操作，但是我还没有在其他浏览器上进行过实际测试。您可以在AtropaToolbox中查看HTMLParser.js，以获取使用document.implementation方法的示例。我已使用此脚本XMLHttpRequest页面进行页面处理和从中提取数据。虽然页面中的脚本没有执行，但我可能想要的不是我想要的。我之所以使用这种相当冗长的方法，而不是尝试使用XMLHttpRequest 对象的直接原因是我当时在解析错误时遇到了很多麻烦，我想指定该文档应解析为HTML 4 Transitional，因为它似乎需要各种各样的参数并生成DOM。
也有一个DOMParser可能更容易使用的功能。MDN页面上的Eli Gray有一个实现，用于DOMParser不支持的浏览器document.implementation.createHTMLDocument。规范DOMParser指定不执行页面中的脚本，并且呈现noscript标记的内容。
如果您确实需要在页面中启用脚本，则可以创建一个高度为0，宽度为0，没有边框等的iFrame。它仍会存在于页面中，但您可以很好地隐藏它。
也可以选择使用window.open()with 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生成了无头可编写脚本的Web浏览器。您将有权访问本地文件系统，并且几乎可以做任何您想做的事情。我真的不知道您要用全页脚本和操作来完成什么。
| 归档时间： |
|
| 查看次数： |
27774 次 |
| 最近记录： |