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

HTML DOM baseURIプロパティとは?使い方とサンプルコードをわかりやすく解説

HTML DOMのbaseURIプロパティは、ドキュメントのベースURI(Uniform Resource Identifier)を返すプロパティです。このプロパティは読み取り専用であり、値を設定することはできません。戻り値は、対象ページのベースURIを表す文字列型(string)の値になります。

baseURIプロパティの構文

baseURIプロパティの基本的な構文は以下のとおりです。

node.baseURI

baseURIプロパティの使用例

ここでは、実際にbaseURIプロパティを使ってドキュメントのベースURIを取得する例を見ていきましょう。ボタンをクリックすると、現在のページのベースURIが画面に表示されます。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、ドキュメントのベースURIが表示されます</p>
<button onclick="BaseFunction()">BASE URI</button>
<p id="Sample"></p>
<script>
    function BaseFunction() {
        var x = document.baseURI;
        document.getElementById("Sample").innerHTML = x;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM baseURIプロパティとは?使い方とサンプルコードをわかりやすく解説

「BASE URI」ボタンをクリックすると、以下のようにページのベースURIが表示されます。

HTML DOM baseURIプロパティとは?使い方とサンプルコードをわかりやすく解説

サンプルコードの解説

このサンプルでは、まずクリックイベントでBaseFunction()を実行するための「BASE URI」ボタンを作成しています。

<button onclick="BaseFunction()">BASE URI</button>

続いて、BaseFunction()の中でbaseURIプロパティを使用してドキュメントのベースURIを取得し、id属性が「Sample」である段落要素にその値を表示しています。

function BaseFunction() {
    var x = document.baseURI;
    document.getElementById("Sample").innerHTML = x;
}

このように、document.baseURIと記述するだけで、現在のドキュメントに設定されているベースURIを簡単に取得できます。URLの解析や相対パスの絶対化などを行う際に役立つ便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOMのol要素startプロパティとは?使い方とサンプルコードを解説

    ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト(番号付きリスト)のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文(シンタックス) 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの

  2. HTML DOM Ol reversedプロパティとは?リストの降順・昇順を切り替える方法を解説

    HTML DOMのOl reversedプロパティは、順序付きリスト(<ol>要素)の番号を降順にするか、昇順(デフォルト)にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値(true / false)を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示