JavaScriptで現在のHTMLを取得するにはどうすればいいですか？

JavaScriptで現在のウェブページのHTMLを取得するには、いくつかの方法があります。この記事では、代表的な方法とそれぞれの使用方法、そして注意点について詳しく解説します。

window.location.hrefプロパティで現在のURLを取得する

JavaScriptで現在のウェブページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティは、ブラウザのアドレスバーに表示されているURLを文字列として返します。

<script>
  // 現在のURLを取得
  const currentURL = window.location.href;

  // コンソールにURLを表示
  console.log(currentURL);
</script>

上記コードを実行すると、コンソールに現在のページのURLが出力されます。例えば、"https://www.example.com/page.html" のような形式になります。

document.documentElement.outerHTMLでHTML全体を取得する

document.documentElement.outerHTMLプロパティを使用すると、DOCTYPE宣言を含むHTML全体を取得することができます。

<script>
  // HTML全体を取得
  const htmlString = document.documentElement.outerHTML;

  // コンソールにHTMLを表示
  console.log(htmlString);
</script>

このプロパティは、現在のページのHTMLを文字列として取得する際に便利です。例えば、ページの内容をサーバーに送信したり、他のJavaScript関数で処理する場合などに利用できます。

innerHTMLプロパティで特定要素内のHTMLを取得する

特定の要素内のHTMLを取得したい場合は、innerHTMLプロパティを使用します。

<div id="target">
    <p>この要素内のHTMLを取得します。</p>
  </div>

  <script>
  // IDが"target"の要素を取得
  const targetElement = document.getElementById('target');

  // 要素内のHTMLを取得
  const innerHTML = targetElement.innerHTML;

  // コンソールにHTMLを表示
  console.log(innerHTML);
</script>

このコードでは、IDが"target"のdiv要素内のHTMLを取得し、コンソールに表示します。innerHTMLプロパティは、指定した要素内のHTMLを取得する際に便利です。

注意点

document.documentElement.outerHTMLを使用する場合、スクリプトタグ内のコードも取得してしまうので注意が必要です。
innerHTMLを使用する場合、クロスサイトスクリプティング(XSS)の脆弱性を生む可能性があります。ユーザーが入力したデータを表示する場合は、サニタイズなどの対策を施す必要があります。

まとめ

この記事では、JavaScriptで現在のHTMLを取得する方法を紹介しました。状況に応じて適切な方法を選択し、安全なコードを記述してください。

参考資料

<a href="https://developer.mozilla.org/ja/docs/Web/API/Window/location" target="_blank" rel="noopener noreferrer">Window.location - Web API | MDN</a>
<a href="https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML" target="_blank" rel="noopener noreferrer">Element.innerHTML - Web API | MDN</a>

よくある質問

質問	回答
JavaScriptで現在のURLを取得するにはどうすればよいですか？	`window.location.href`プロパティを使用します。
JavaScriptでHTML全体を取得するにはどうすればよいですか？	`document.documentElement.outerHTML`プロパティを使用します。
JavaScriptで特定の要素内のHTMLを取得するにはどうすればよいですか？	`innerHTML`プロパティを使用します。

その他の参考記事:jquery href 取得