ドキュメント全体のHTMLを文字列として取得する方法は？

237

JSでHTMLタグ内のHTML全体を文字列として取得する方法はありますか？

document.documentElement.??
javascript  html  document  tostring 
— フラッシュ
ソース
10
唯一の正しい答え：stackoverflow.com/questions/817218/…（inner / outerHTMLの回答の投票を停止します。ソース全体が提供されるわけではありません！）
— John
2
document.body.parentElement.innerHTML
— Redwolfプログラム
@ジョンは彼らが何を提供しないのですか？
— bluejayke

回答:

320

MSが追加outerHTMLとinnerHTMLいくつかの時間前にプロパティを。

MDNによれば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であるDOM構文解析とシリアライズ仕様。

ブラウザの互換性については、quirksmodeを参照してください。すべてのサポートinnerHTML。

var markup = document.documentElement.innerHTML;
alert(markup);
— コリン・バーネット
ソース
28
outerHTMLはdoctypeを取得しません。
— CMCDragonkai 2014
2
魅力のように働いた！ありがとうございました！jsおよびcssファイルを含む、ドキュメントにリンクされたすべてのファイルのサイズを取得する方法はありますか？
— www139 2015年
@CMCDragonkai：doctypeを個別に取得して、マークアップ文字列の前に追加できます。理想的ではありませんが、可能です。
— Mike Branski、2015年
76

できるよ

new XMLSerializer().serializeToString(document)

IE 9より新しいブラウザー

https://caniuse.com/#feat=xml-serializerを参照してください

— エリックアイグナー
ソース
5
日付/時刻スタンプによると、これが最初の 正解でした。XML宣言などのページの一部は含まれず、ブラウザは他の「回答」を使用するときにコードを操作します。これは、投票する必要がある唯一の投稿です（dosは3日後に投稿されます）。人々は注意を払う必要があります！
— ジョン
2
serializeToStringはHTMLエンコードを実行するため、これは完全に正しくはありません。たとえば、コードに「Times New Roman」、Timesなどのフォントを定義するスタイルが含まれている場合、セリフの引用符はHTMLエンコードされます。多分それはあなたにとっては重要ではないかもしれませんが、私にとってそれは...
— Marko
3
@Johnは、OPが実際に「htmlタグ内のHTML 全体」を要求することを確認しています。そして、コリン・バーネットによって選ばれたベストアンサーはこれを実現します。この特定の回答（Erikの回答）には、htmlタグとdoctypeが含まれます。とはいえ、これは完全に私にとっては原石のダイヤモンドであり、まさに私が探していたものでした！あなたのコメントも
— 役に立ち
2
これはブラウザが受け取る実際のhtmlではない値を返すため、特に注意してください。私の場合、htmlサーバーが実際に送信したことのない属性がタグに追加されました:(
— onassar
1
すべてのブラウザでサポートされています。この貧弱なブラウザのサポートはどうですか？
— Erik Aigner
44

私はdocument.documentElement.outerHTMLあなたのためにそれを返すべきだと思います。

MDNによれば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であるDOM構文解析とシリアライズ仕様。

outerHTMLプロパティのMSDNページには、IE 5以降でサポートされていることが記載されています。Colinの回答はW3Cのquirksmodeページへのリンクであり、ブラウザー間の互換性（他のDOM機能についても）の優れた比較を提供しています。

— ノルドリン
ソース
すべてのブラウザがこれをサポートしているわけではありません。
— コリンバーネット、
@Colin：ええ、良い点です。経験上、IE 6+とFirefoxの両方がそれをサポートしていることを覚えているようですが、リンクしたquirksmodeページは別の方法で示唆しています...
— 09年
FirefoxはOuterHTMLをサポートしていません。IE独自のものです。developer.mozilla.org/En/...
— ジェシーデアリング
4
doctypeとhtmlタグを含むすべてを取得する方法はありますか？
— trusktr 2012
1
実は私が最初でした。：P
— Noldorin
40

何が返ってくるのか、いろいろ答えてみました。Chromeの最新バージョンを使用しています。

提案がdocument.documentElement.innerHTML;返されました<head> ... </body>

ギャビーの提案document.getElementsByTagName('html')[0].innerHTML;は同じことを返しました。

「doctype」以外のすべての提案がdocument.documentElement.outerHTML;返さ<html><head> ... </body></html>れました。

あなたはとDOCTYPEオブジェクトを取得することができますdocument.doctype; ：あなたはHTML5を含めまでのすべてのdoctypeのための文字列となどの詳細を抽出するために必要がある場合は、それがここで説明され、この戻りオブジェクトではなく、文字列をJavaScriptで文字列として取得DOCTYPE HTMLの

HTML5だけが欲しかったので、ドキュメント全体を作成するには次のように十分でした。

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

— paulo62
ソース
6
これが最も完全な答えであり、受け入れられるべきです。2016年現在、ブラウザーの互換性は完全であり、（現在受け入れられている回答のように）詳細に言及する必要はありません。
— Dan Dascalescu
10

次のこともできます：

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

あなたはDoctypeまたはhtmlタグを取得しませんが、他のすべて...

— ハカン
ソース
5 
document.documentElement.outerHTML
— ブライアンキャンベル
ソース
1
すべてのブラウザがこれをサポートしているわけではありません。
— コリンバーネット、
2
Firefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobile、およびSafari Mobile（MDN）でサポートされています。outerHTMLであるDOM構文解析とシリアライズ仕様。
— XP1
コリンの答えはより詳細です。
— Dan Dascalescu、2016
4

おそらくIEのみ：

>     webBrowser1.DocumentText

1.0からのFFの場合：

//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で動作する可能性があります。（source-textの非常に最初から非常に最初の300文字、主にdoctype-defsを表示します。）

ただし、FFの通常の[名前を付けて保存]ダイアログは、ページの現在の状態を保存するのではなく、元々読み込まれたX / h / tml-source-textを保存しない場合があることに注意してください。（いくつかの一時ファイルへのssのPOST-upとそれにリダイレクトすると、以前に行われた変更/編集を含む保存可能なソーステキストが配信される可能性があります。）

FFは、「戻る」との状態/値のNICE包含「（など）を保存...」上の良好な回復で驚きますが、入力のようなFIELDS、TextAreaのではないのcontentEditable /ののdesignModeの要素上など、...

xhtml-respでない場合。xml-file（mime-type、filename-extensionだけではありません！）、document.open/write/closeを使用してアプリケーションを設定できます。FFのFile / Saveメニューからのユーザーのsave-dialogに保存されるソースレイヤーへのコンテンツ。参照：http : //www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp。

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

X（ht）MLの質問に中立、「view-source：http：// ...」を（script-made !?）iframeのsrc-attribの値として試してください-iframesにアクセスするには- FFのドキュメント：

<iframe-elementnode>.contentDocument、apprについてはgoogle "mdn contentDocument"を参照してください。たとえば、「textContent」のようなメンバー。'その数年前に手に入れましたが、それをうろつくのは好きではありません。それでも緊急の必要がある場合は、これについて言及してください。

— ドス
ソース
1

また<html>...</html>、<!DOCTYPE ...>宣言の外側にあるものを取得するには、最も重要なのは、document.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}`)
    }
}

このコードをnpmのdocument-outerhtmlとして公開しました。

編集上記のコードは関数に依存することに注意してください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
}

— ガーベン
ソース
0

私は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>
スニペットを展開

— キランヴィ
ソース
0

私は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));
スニペットを展開

— サム・ワトキンス
ソース
-2

ドキュメントchildNodesを反復処理し、outerHTMLコンテンツを取得する必要があります。

VBAでは次のようになります

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

これを使用すると、<！DOCTYPE>ノード（存在する場合）を含むWebページのすべての要素を取得できます

— ミレビョ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.