在JS中是否有一种方法可以在HTML标签中获取整个HTML,作为字符串?

document.documentElement.??

当前回答

document.documentElement.outerHTML

其他回答

使用document.documentElement。

这里回答了同样的问题: https://stackoverflow.com/a/7289396/2164160

我总是用

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

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

还可以获取<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函数;它的实现可以如下所示(下面的代码以doctype-to-string的形式发布在NPM上):

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
}

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

函数get_document_html(sep="\n") { 让HTML = ""; let xml = new XMLSerializer(); for (let n of document.childNodes) { if (n.nodeType == Node.ELEMENT_NODE) html += n.outerHTML + sep; 其他的 html += xml.serializeToString(n) + sep; } 返回html; } console.log (get_document_html()。片(0,200));

可能只有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 !! (POST-up ss到某个临时文件并重定向到该文件可能会提供一个可保存的源文本,其中包含之前对其进行的更改/编辑。)

虽然FF惊喜于“back”上的良好恢复和“Save (as)…”上的状态/值的NICE包含,如输入字段,textarea等,而不是contentteditable / designMode中的元素…

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

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

对于X(ht)ML的问题中立,尝试“view-source:http://...”作为iframe (script-made!?)的src-attrib的值,-来访问FF中的iframe -文档:

< iframe-elementnode >。appr,请参见谷歌"mdn contentDocument"。成员,例如'textContent'。 “几年前就有了,不喜欢爬着拿。如果还有紧急需要,就提这个,我要潜入…