【徹底解説】JavaScriptでHTMLを取得：document、documentElement、outerHTMLを使いこなす

2024-05-21

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

document.documentElement.outerHTML プロパティを使用する

この方法は、最も簡潔でわかりやすい方法です。document.documentElement は、HTML ドキュメントのルート要素を表すオブジェクトであり、outerHTML プロパティは、その要素とすべての子要素を含む HTML コードを文字列として返します。

const htmlString = document.documentElement.outerHTML;
console.log(htmlString);

この方法は、document.body 要素内にある HTML コードのみを取得する場合に有効です。document.body は、HTML ドキュメントの本文部分を表すオブジェクトであり、innerHTML プロパティは、その要素内にある HTML コードを文字列として返します。

const htmlString = document.body.innerHTML;
console.log(htmlString);

一般的には、document.documentElement.outerHTML プロパティを使用するのがおすすめです。これは、ドキュメント全体の HTML を取得するのに最も直接的でわかりやすい方法だからです。

ただし、ドキュメントの本文部分のみを取得したい場合は、document.body.innerHTML プロパティを使用する方が効率的です。

注意点

上記のコードは、スクリプトがドキュメントの読み込み完了後に実行されることを前提としています。スクリプトがドキュメントの読み込み完了前に実行されると、正しく HTML を取得できない可能性があります。
取得した HTML 文字列は、そのまま Web ページに書き出すことも、他の処理に使用することもできます。

上記以外にも、XMLSerializer クラスを使用したり、再帰的な関数を作成したりして、ドキュメント全体の HTML を文字列として取得する方法があります。

しかし、一般的には上記で紹介した 2 つの方法で十分です。

document.documentElement.outerHTML プロパティを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
  <script>
    const htmlString = document.documentElement.outerHTML;
    console.log(htmlString);
  </script>
</body>
</html>

このコードを実行すると、次の出力がコンソールに表示されます。

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
  <script>
    const htmlString = document.documentElement.outerHTML;
    console.log(htmlString);
  </script>
</body>
</html>

document.body.innerHTML プロパティを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
  <script>
    const htmlString = document.body.innerHTML;
    console.log(htmlString);
  </script>
</body>
</html>

<h1>Hello, world!</h1>
<p>This is a paragraph.</p>

解説

document.documentElement は、HTML ドキュメントのルート要素を表すオブジェクトです。
outerHTML プロパティは、その要素とすべての子要素を含む HTML コードを文字列として返します。

このサンプルコードは、JavaScript でドキュメント全体の HTML を文字列として取得する方法を理解するのに役立ちます。

JavaScript でドキュメント全体の HTML を取得するその他の方法

XMLSerializer クラスは、DOM オブジェクトを XML 文字列に変換するために使用できます。この方法を使用すると、ドキュメント全体の HTML を XML 形式で取得できます。

const serializer = new XMLSerializer();
const htmlString = serializer.serializeToString(document);
console.log(htmlString);

再帰的な関数を使用して、DOM ツリーを階層的に処理し、各要素の HTML コードを文字列として連結することで、ドキュメント全体の HTML を取得することもできます。

function getHTMLString(element) {
  let htmlString = element.outerHTML;
  for (const childElement of element.childNodes) {
    htmlString += getHTMLString(childElement);
  }
  return htmlString;
}

const htmlString = getHTMLString(document.documentElement);
console.log(htmlString);

ライブラリを使用する

jsdom や cheerio などのライブラリを使用すると、DOM 操作をより簡単に実行できます。これらのライブラリを使用して、ドキュメント全体の HTML を文字列として取得することもできます。

例：jsdom を使用する

const { JSDOM } = require('jsdom');

const { window } = new JSDOM('<html><body><h1>Hello, world!</h1></body></html>');
const htmlString = window.document.documentElement.outerHTML;
console.log(htmlString);

例：cheerio を使用する

const cheerio = require('cheerio');

const htmlString = '<html><body><h1>Hello, world!</h1></body></html>';
const $ = cheerio.load(htmlString);
const html = $('html').html();
console.log(html);