如何获得整个文档HTML作为字符串?

在JS中是否有一种方法可以在超文本标记语言标记中获取整个HTML，作为字符串?

document.documentElement.??
450698 次浏览
小开

我相信document.documentElement.outerHTML应该为你返回。

根据中数，在Firefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobile和Safari Mobile中支持outerHTML。outerHTML在DOM解析和序列化规范中。

outerHTML财产上的MSDN页面指出IE 5+支持MSDN。Colin的回答链接到W3C quirksmode页面，该页面很好地比较了跨浏览器兼容性(也有其他DOM特性)。

小开 
document.documentElement.outerHTML
小开 
document.documentElement.innerHTML
小开
最佳答案

MS在一段时间前添加了outerHTML和innerHTML属性。

根据中数，在Firefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobile和Safari Mobile中支持outerHTML。outerHTML在DOM解析和序列化规范中。

查看quirksmode浏览器兼容性，了解适合你的浏览器。所有支持innerHTML。

var markup = document.documentElement.innerHTML;
alert(markup);
小开

正确的做法其实是:

webBrowser1。DocumentText

小开

我总是用

document.getElementsByTagName('html')[0].innerHTML

可能不是正确的方式，但当我看到它时，我能理解它。

小开

你还可以:

document.getElementsByTagName('html')[0].innerHTML

你不会得到Doctype或html标签，但其他的一切…

小开

可能只有ie:

>     webBrowser1.DocumentText

FF从1.0上升:

//serialize current DOM-Tree incl. changes/edits to ss-variable
var ns = new XMLSerializer();
var ss= ns.serializeToString(document);
alert(ss.substr(0,300));

可能在FF工作。(显示源文本最开始的前300个字符，主要是doctype-defs。)

但是请注意，FF的正常“另存为”对话框可能不会保存页面的当前状态，而是保存原始加载的X/h/tml-source-text !! (ss POST-up到某个临时文件并重定向到该文件可能会提供一个可保存的源文本，其中包含之前对其进行的更改/编辑。

虽然FF在“back”上的良好复苏令人意外;以及一个NICE的包含状态/值的“;Save (as)…”对于输入类FIELDS, textarea等，不在contentteditable / designMode中的元素上…

如果不是xhtml- resp。xml-file (mime-type，不仅仅是filename-extension!)，你可以使用document。打开/写入/关闭设置appr。内容到源层，将保存在用户的保存对话框从文件/保存菜单的FF。 看到的: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp . < / p >

https://developer.mozilla.org/en-US/docs/Web/API/document.write

中立的问题X(ht)ML，尝试"view-source:http://..."(script-made!?) iframe的src-attrib值，-访问FF中的iframe文档:

<iframe-elementnode>.contentDocument，参见谷歌"mdn contentDocument"从新加坡。成员，例如'textContent'。 “几年前就有了，不喜欢爬着拿。如果仍然迫切需要，就说这一点，我必须潜入…

小开

我尝试了各种答案，看看返回了什么。我用的是最新版本的Chrome浏览器。

建议document.documentElement.innerHTML;返回<head> ... </body>

Gaby的建议document.getElementsByTagName('html')[0].innerHTML;返回相同的结果。

建议document.documentElement.outerHTML;返回<html><head> ... </body></html> 这是除了'doctype'以外的所有东西。< / p >

document.doctype;将返回一个对象，而不是字符串，因此如果你需要为所有doctype(包括HTML5)提取细节为字符串，请在这里描述:使用Javascript获取HTML的DocType为字符串

我只需要HTML5，所以以下内容足以让我创建整个文档:

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

小开

使用document.documentElement。

同样的问题在这里回答: https://stackoverflow.com/a/7289396/2164160 < / p >

小开

你可以这样做

new XMLSerializer().serializeToString(document)

在比ie9更新的浏览器中

看到https://caniuse.com/#feat=xml-serializer

小开

要获得<html>...</html>之外的内容，最重要的是<!DOCTYPE ...>声明，您可以遍历文档。childNodes，将它们转换为字符串:

const html = [...document.childNodes]
.map(node => nodeToString(node))
.join('\n') // could use '' instead, but whitespace should not matter.


function nodeToString(node) {
switch (node.nodeType) {
case node.ELEMENT_NODE:
return node.outerHTML
case node.TEXT_NODE:
// Text nodes should probably never be encountered, but handling them anyway.
return node.textContent
case node.COMMENT_NODE:
return `<!--${node.textContent}-->`
case node.DOCUMENT_TYPE_NODE:
return doctypeToString(node)
default:
throw new TypeError(`Unexpected node type: ${node.nodeType}`)
}
}

我将这段代码作为document-outerhtml发布在npm上。

注意上面的代码依赖于一个函数doctypeToString;它的实现可以如下所示(下面的代码在npm中发布为doctype-to-string):

function doctypeToString(doctype) {
if (doctype === null) {
return ''
}
// Checking with instanceof DocumentType might be neater, but how to get a
// reference to DocumentType without assuming it to be available globally?
// To play nice with custom DOM implementations, we resort to duck-typing.
if (!doctype
|| doctype.nodeType !== doctype.DOCUMENT_TYPE_NODE
|| typeof doctype.name !== 'string'
|| typeof doctype.publicId !== 'string'
|| typeof doctype.systemId !== 'string'
) {
throw new TypeError('Expected a DocumentType')
}
const doctypeString = `<!DOCTYPE ${doctype.name}`
+ (doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : '')
+ (doctype.systemId
? (doctype.publicId ? `` : ` SYSTEM`) + ` "${doctype.systemId}"`
: ``)
+ `>`
return doctypeString
}

小开

我只需要doctype html，应该可以在IE11, Edge和Chrome中正常工作。我使用下面的代码，它工作得很好。

function downloadPage(element, event) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);


if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
document.execCommand('SaveAs', '1', 'page.html');
event.preventDefault();
} else {
if(isChrome) {
element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
}
element.setAttribute('download', 'page.html');
}
}

在你的锚标签中像这样使用。

<a href="#" onclick="downloadPage(this,event);" download>Download entire page.</a>

例子

    function downloadPage(element, event) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    

if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
document.execCommand('SaveAs', '1', 'page.html');
event.preventDefault();
} else {
if(isChrome) {
element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
}
element.setAttribute('download', 'page.html');
}
}
I just need doctype html and should work fine in IE11, Edge and Chrome.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<p>
<a href="#" onclick="downloadPage(this,event);"  download><h2>Download entire page.</h2></a></p>


<p>Some image here</p>


<p><img src="https://placeimg.com/250/150/animals"/></p>

小开

您必须遍历文档childNodes并获得outerHTML内容。

在VBA中是这样的

For Each e In document.ChildNodes
Put ff, , e.outerHTML & vbCrLf
Next e

使用这个，可以让你得到网页的所有元素，包括<DOCTYPE >节点(如果存在)

小开

我用outerHTML表示元素(主<html>容器)，用XMLSerializer表示其他任何东西，包括<!DOCTYPE>， <html>容器外的随机注释，或其他可能存在的东西。空格似乎没有保留在<html>元素之外，所以我默认使用sep="\n"添加换行符。

function get_document_html(sep="\n") {
let html = "";
let xml = new XMLSerializer();
for (let n of document.childNodes) {
if (n.nodeType == Node.ELEMENT_NODE)
html += n.outerHTML + sep;
else
html += xml.serializeToString(n) + sep;
}
return html;
}


console.log(get_document_html().slice(0, 200));

小开

如果你想获取DOCTYPE之外的所有内容，这将有效:

document.getElementsByTagName('html')[0].outerHTML;

如果你想要doctype也可以这样:

new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML;

提交答案