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

JavaScriptのcreateHTMLDocument()でカスタムURLを設定したHTMLドキュメントを作成する方法

JavaScriptでは、document.implementation.createHTMLDocument()メソッドを利用することで、現在のドキュメントとは独立した新しいHTMLドキュメントを生成できます。さらに、作成したドキュメントに<base>要素を追加すれば、ドキュメント内で相対URLが解決される際の基準となるカスタムURLを設定することも可能です。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<script>
    const htmlDocument = document.implementation.createHTMLDocument();
    const customURL = htmlDocument.createElement('base');
    customURL.href = "https://www.tutorialspoint.com/java/index.htm";
    htmlDocument.head.append(customURL);
    console.log("Base URL=" + customURL.href);
    const modifiedURL = htmlDocument.createElement("a");
    modifiedURL.href = "../java/java_questions_answers.html";
    htmlDocument.body.append(modifiedURL);
    console.log("After Modifying URL=" + modifiedURL.href);
</script>
</body>
</html>

上記のプログラムを実行するには、ファイルを「anyName.html(index.html)」などの任意の名前で保存し、そのファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」オプションを選択するとブラウザで開くことができます。

実行結果

コンソールには以下のように出力されます。

Base URL=https://www.tutorialspoint.com/java/index.htm
After Modifying URL=https://www.tutorialspoint.com/java/java_questions_answers.html

コードの解説

まずcreateHTMLDocument()で空のHTMLドキュメントを生成し、createElement('base')で<base>要素を作成してhrefプロパティに基準URLを設定します。これをheadに追加することで、このドキュメント内における相対パス解決の起点がそのURLになります。

続いて、<a>要素のhrefに相対パス「../java/java_questions_answers.html」を設定すると、<base>要素のURLを基準に解決され、結果として「https://www.tutorialspoint.com/java/java_questions_answers.html」という絶対URLが得られます。

このように、メインのページのURLに影響を与えることなく、ドキュメントごとに独立した基準URLを持たせたい場合にcreateHTMLDocument()は非常に便利です。テンプレートの生成やHTMLの解析など、オフスクリーンでドキュメントを扱いたい場面で活用できます。

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

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

  2. JavaScriptでToDoリスト（やることリスト）を作成する方法

    JavaScriptを使えば、テキストボックスに入力したタスクを順番にリストへ追加していく、シンプルなToDoリスト（やることリスト）を簡単に作成できます。この記事では、HTML・CSS・JavaScript（jQuery）を組み合わせた基本的な実装例を、コードと実行手順とあわせて紹介します。 実装例 以下は、ToDoリストを作成するためのコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8"> &n