HTML DOM URLプロパティとは？使い方とサンプルコードを解説
HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。
構文
URL プロパティの値を取得する基本的な構文は以下の通りです。
document.URL
このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。
HTML DOM URL プロパティの使用例
ここでは、ボタンをクリックすると現在のページの URL を画面に表示するサンプルを紹介します。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM URL</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-URL</legend>
<h2>This is a Demo Example</h2>
<input type="button" value="Get Link" onclick="getLink()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
function getLink() {
divDisplay.textContent = document.URL;
}
</script>
</body>
</html>
コードの解説
このサンプルでは、「Get Link」ボタンがクリックされると getLink() 関数が呼び出されます。関数内では document.URL を使って現在のドキュメントの URL を取得し、その値を divDisplay 要素のテキストとして表示しています。
実行結果
「Get Link」ボタンをクリックする前：
「Get Link」ボタンをクリックした後：
ボタンをクリックすると、divDisplay の領域に現在開いているページの URL が文字列として表示されます。このように、document.URL プロパティを使えば、JavaScript だけで手軽にページの URL 情報を取得することができます。
-
HTML DOM URLプロパティとは？使い方とサンプルコードを解説
HTML DOM の URL プロパティは、現在のドキュメント（ページ）の URL に対応する文字列を返すプロパティです。読み取り専用のため、JavaScript からページの完全な URL を簡単に取得できます。 構文 URL プロパティの値を取得する基本的な構文は以下の通りです。 document.URL このプロパティは引数を取らず、ドキュメントの URL を文字列として返します。なお、類似の機能を持つ document.location.href との違いとして、document.URL は読み取り専用である点が挙げられます。 HTML DOM URL プロパティの使用例 ここでは、ボ
-
HTML DOM Video srcプロパティとは？動画URLの取得・設定方法を実例付きで解説
HTML DOM の Video src プロパティは、<video> 要素で再生する動画のURL（ソース）に対応する文字列を取得、または設定するためのプロパティです。JavaScriptから動的に動画ファイルを差し替えたり、現在設定されているURLを参照したりする際に活用できます。構文srcプロパティの値を取得する場合mediaObject.srcsrcプロパティにURL文字列を設定する場合mediaObject.src = URLStringそれでは、HTML DOM Video src プロパティの具体的な使用例を見ていきましょう。サンプルコード以下の例では、ユーザー名として