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

HTML DOMのBase hrefプロパティとは？基本構文と実装例をわかりやすく解説

HTML DOMのBase hrefプロパティは、HTMLの<base>タグに関連付けられたプロパティです。<base>タグは、現在のHTMLドキュメント内にあるすべての相対URLに対して基準となるベースURLを指定するために使用されます。なお、1つのHTMLドキュメント内に配置できる<base>タグは最大で1つまでという制限があります。

Base hrefプロパティを使用すると、base要素のhref属性値を取得したり、新しいURLを設定したりすることができます。

構文

Base hrefプロパティの構文は以下の通りです。

hrefプロパティに値を設定する場合

baseObject.href = URL

ここでの「URL」には、基準となるベースURLを指定します。

hrefプロパティの値を取得する場合

baseObject.href

サンプルコード

それでは、Base hrefプロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>下のボタンをクリックすると、上記リンクのhref値が変更されます</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
    function SetHref() {
        document.getElementById("myBase").href = "https://duckduckgo.com";
        document.getElementById("Sample").innerHTML = "ベースURLがbing.comからduckduckgo.comに変更されました";
    }
    function GetHref(){
        var x = document.getElementById("myBase").href;
        document.getElementById("Sample").innerHTML = x;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

「SET IT」ボタンをクリックした場合：

ベースURLが変更され、その旨のメッセージが表示されます。

「GET IT」ボタンをクリックした場合：

現在設定されているベースURLの値が画面に表示されます。

コードの解説

上記のサンプルコードでは、以下のような処理を行っています。

1. base要素の作成

まず、id属性に「myBase」を指定し、href属性の値として「https://www.bing.com」を設定した<base>要素を作成しています。

<base id="myBase" href="https://www.bing.com">

2. アンカー要素の作成

次に、href属性の値が「/images」であるアンカー（リンク）要素を作成しています。ここでの「/images」は相対パスであり、ベースパスは<base>タグで指定されています。そのため、ベースURLとアンカー要素のURLを組み合わせると、最終的なリンク先は「https://www.bing.com/images」となります。

<a href="/images">IMAGES</a>

3. ボタンの作成

続いて、「SET IT」と「GET IT」という2つのボタンを作成し、それぞれクリックされたときにSetHref()関数とGetHref()関数が呼び出されるようにしています。

<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>

4. SetHref()関数の処理内容

SetHref()関数は、getElementById()メソッドを使ってid「myBase」から<base>要素を取得し、hrefプロパティ経由でURLを「https://www.duckduckgo.com」に変更します。変更が成功したことを示すメッセージは、id「Sample」が付いた段落要素に表示されます。

function SetHref() {
    document.getElementById("myBase").href = "https://duckduckgo.com";
    document.getElementById("Sample").innerHTML = "ベースURLがbing.comからduckduckgo.comに変更されました";
}

5. GetHref()関数の処理内容

GetHref()関数も同様に、getElementById()メソッドを使ってid「myBase」から<base>要素を取得し、hrefプロパティでそのURLを読み取って変数xに代入します。その後、innerHTMLプロパティを使って段落要素の内容を変数xの値に書き換えることで、<base>要素のhref属性の値が画面上に表示される仕組みです。

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

まとめ

Base hrefプロパティを使えば、JavaScriptから動的にベースURLを取得・変更できます。相対パスでリンクや画像を多数配置しているページでは、<base>タグとこのプロパティを活用することで、URL管理を効率化できるでしょう。ただし、<base>タグは1つのドキュメントに1つしか置けない点や、ブラウザによって挙動が異なる場合がある点には注意が必要です。

  1. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ