JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。

innerHTMLプロパティを使った取得方法

ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。

document.documentElement.innerHTML;

document.documentElementはHTML文書のルート要素（<html>要素）を参照するため、そのinnerHTMLを呼び出すことで、開始タグ・終了タグを含むページ全体のHTML構造を文字列として取り出せます。

実装例

実際に動作するサンプルコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプル</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<h1> Hello World </h1>
<p>This is the javascript program..</p>
</body>
<script>
    var entireDocumentHTMLAsAString = document.documentElement.innerHTML;
    console.log(entireDocumentHTMLAsAString);
</script>
</html>

プログラムの実行手順

上記のコードを任意のファイル名（例：index.html）で保存します。次に、VS Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザで簡単に実行できます。

実行結果

プログラムを実行すると、ブラウザ上に以下のように表示されます。

【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

さらに、開発者ツールのコンソールには、ドキュメント全体のHTMLが文字列として出力されます。

【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

補足：outerHTMLとの違い

innerHTMLは要素の内部コンテンツのみを返しますが、要素自体のタグも含めて取得したい場合はouterHTMLを使用します。ただし、document.documentElement.outerHTMLを使えば、<html>タグ自体も含んだ完全なHTML文字列を取得できるため、用途に応じて使い分けると良いでしょう。


  1. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h

  2. JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する

    h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。 childNodes[0].textContent; 仕組みの解説 querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを