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

HTML DOMのBaseオブジェクトとは？＜base＞要素の使い方をサンプルコード付きで解説

HTML DOM の Base オブジェクトは、HTML の <base> 要素に関連付けられたオブジェクトです。<base> 要素は、HTML ドキュメント内の他のすべての相対URLに対する基準URL（ベースURL）を指定するために使用されます。なお、1つの HTML ドキュメント内に配置できる <base> 要素は最大1つだけです。Base オブジェクトを使うことで、<base> 要素の href 属性などを JavaScript から設定・取得できます。

Base オブジェクトのプロパティ

Base オブジェクトには、主に以下の2つのプロパティが用意されています。

プロパティ説明
href<base> 要素の href 属性の値を設定または返します
target<base> 要素の target 属性の値を設定または返します

構文

各操作の基本構文は以下のとおりです。

base 要素を作成する場合

document.createElement("base")

base 要素にアクセスする場合

var a = document.getElementById("demoBase");

サンプルコード

それでは、base オブジェクトの具体的な使用例を見てみましょう。このサンプルでは、ボタンのクリックによって BASE 要素を「作成」したり「取得」したりできます。

<!DOCTYPE html>
<html>
<body>
<p>まず要素を作成し、その後でアクセスしてみましょう。</p>
<p>下のボタンをクリックすると、BASE 要素を作成または取得できます。</p>
<button onclick="CreateBase()">作成（CREATE）</button>
<button onclick="AcessBase()">取得（ACCESS）</button>
<p id="SAMPLE"></p>
<script>
    function CreateBase() {
        var x = document.createElement("BASE");
        x.setAttribute("id", "myBase");
        x.setAttribute("href", "https://www.google.com");
        document.head.appendChild(x);
        document.getElementById("SAMPLE").innerHTML = "href が https://www.google.com の BASE 要素を作成しました";
    }
    function AcessBase() {
        var x = document.getElementById("myBase").href;
        document.getElementById("SAMPLE").innerHTML = x;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、最初は以下のように表示されます。

HTML DOMのBaseオブジェクトとは？＜base＞要素の使い方をサンプルコード付きで解説

「作成（CREATE）」ボタンをクリックした場合 −

HTML DOMのBaseオブジェクトとは？＜base＞要素の使い方をサンプルコード付きで解説

「取得（ACCESS）」ボタンをクリックした場合 −

HTML DOMのBaseオブジェクトとは？＜base＞要素の使い方をサンプルコード付きで解説

コードの解説

上記の例では、「作成」と「取得」の2つのボタンを配置し、クリック時にそれぞれ CreateBase() 関数と AcessBase() 関数が呼び出されるようにしています。

<button onclick="CreateBase()">作成（CREATE）</button>
<button onclick="AcessBase()">取得（ACCESS）</button>

CreateBase() 関数では、document.createElement("BASE") によって新しい base 要素を生成し、変数 x に格納します。続いて setAttribute() メソッドを使って、id 属性に "myBase"、href 属性に "https://www.google.com" を設定します。さらに appendChild() メソッドで、新しく作成した base 要素をドキュメントの head 内に追加します。最後に、作成完了メッセージが id が "SAMPLE" の段落に表示される仕組みです。

function CreateBase() {
    var x = document.createElement("BASE");
    x.setAttribute("id", "myBase");
    x.setAttribute("href", "https://www.google.com");
    document.head.appendChild(x);
    document.getElementById("SAMPLE").innerHTML = "href が https://www.google.com の BASE 要素を作成しました";
}

一方、AcessBase() 関数は、先ほど作成した <base> 要素にアクセスするための関数です。getElementById() で id が "myBase" の要素を取得し、その href の値を変数 x に代入します。その後、変数 x の内容が id が "SAMPLE" の段落に出力されます。

function AcessBase() {
    var x = document.getElementById("myBase").href;
    document.getElementById("SAMPLE").innerHTML = x;
}

まとめ

Base オブジェクトを利用すれば、JavaScript から動的に <base> 要素を生成・操作できます。ただし <base> 要素は head 内に1つしか配置できないため、すでに存在する場合は上書き・置き換えの処理が必要になる点に注意しましょう。


  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注