HTML DOM アンカーのusernameプロパティとは？取得・設定方法をわかりやすく解説
HTML DOM のアンカー（<a> タグ）に用意されている username プロパティは、href 属性に含まれる「ユーザー名」部分の値を取得または設定するためのプロパティです。ユーザー名はユーザーが入力する情報で、多くの場合パスワードとペアで使用されます。URL 内では、プロトコル（https:// など）の直後、パスワード部分の直前に指定されます。
例えば、次のような URL を見てみましょう。https://john:john123@www.examplesite.com
この場合、「john」がユーザー名、「john123」がパスワードに相当します。
構文
username プロパティの値を取得する場合
anchorObject.username
username プロパティに値を設定する場合
anchorObject.username = UsernameValue
サンプルコード
ここでは、アンカーの username プロパティを使って、ユーザー名の設定と取得を行う具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
<p>ボタンをクリックしてユーザー名を変更します</p>
<button onclick="changeUser()">Set User</button>
<button onclick="GetUser()">Get User</button>
<p id="Sample"></p>
<script>
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x = document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、まず初期状態のページが表示されます。
「Set User」ボタンをクリックした場合：
「Get User」ボタンをクリックした場合：
コードの解説
上記の例では、以下のような仕組みで動作しています。
1. ユーザー名付きのリンクを準備
まず、ユーザー名が「john」、パスワードが「john123」のリンクを作成しています。
<p><a id="Anchor" href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
2. ボタンで関数を呼び出す
次に、「Set User」「Get User」の2つのボタンを配置し、それぞれ changeUser() 関数と GetUser() 関数を呼び出すようにしています。
<button onclick="changeUser()">Set User</button> <button onclick="GetUser()">Get User</button>
3. 各関数の動作
changeUser() 関数は、リンク内のユーザー名を任意の値（この例では「Rohan」）に変更します。一方、GetUser() 関数は、id が「Anchor」であるリンクからユーザー名を取得し、画面に表示します。
そのため、GetUser() を実行する前に changeUser() が呼び出されていれば「Rohan」が表示され、呼び出されていなければ元の「john」が表示されます。
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x = document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}
このように、username プロパティを活用することで、JavaScript から URL のユーザー名部分を動的に読み書きできるようになります。URL の構成要素を個別に操作したい場合に便利なプロパティです。
-
HTML DOMアンカーのrelプロパティとは？取得・設定方法をわかりやすく解説
HTML DOMのrelプロパティは、リンク（<a>タグ）のrel属性の値を取得または設定するためのプロパティです。rel属性は「relation（関係）」の略で、現在のドキュメントとリンク先のドキュメントとの関係性を記述します。 構文 relプロパティの構文は以下の通りです。 ① 値を取得する場合 anchorObject.rel ② 値を設定する場合 anchorObject.rel = 値 サンプルコード HTML DOMアンカーのrelプロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <body>
-
HTML DOMアンカーのhostnameプロパティの使い方を解説
HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）hostname：ホスト名のみを返す（例：www.demo.com）hostnameプロパティを設定する構文hostnameプロパティに値を設定する場合は、以下のように記述します。anchorObj.hostname = hostname上記の「hostname」には、設定したいUR