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

HTML DOM Anchorのpasswordプロパティの使い方を解説

HTML DOM Anchorのpasswordプロパティとは

HTML DOMのAnchor（アンカー）オブジェクトが持つpasswordプロパティは、href属性値に含まれる「パスワード」の部分を取得または設定するためのプロパティです。

URLにパスワードを含める場合、その部分はユーザー名の後ろ、ホスト名の前に配置されます。具体的には次のような形式になります。

https://username:password@www.demo.com

このうち「password」に該当する部分を読み書きできるのが、passwordプロパティです。

パスワードを設定する構文

anchorObj.password = password

パスワードを取得する構文

anchorObj.password

実装例

それでは、DOM Anchorのpasswordプロパティを実際に使ったサンプルコードを見てみましょう。次の例では、「Display password」ボタンでパスワード部分を、「Display origin」ボタンでオリジンを、「Display hreflang」ボタンで言語情報をそれぞれ表示します。

<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://amit:mypwd123@www.abc.com">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display password</button>
<button onclick="display2()">Display origin</button>
<button onclick="display3()">Display hreflang</button>
<script>
   function display() {
      var a = document.getElementById("mylink").password;
      document.getElementById("myid").innerHTML = a;
   }
   function display2() {
      var a = document.getElementById("mylink").origin;
      document.getElementById("myid").innerHTML = a;
   }
   function display3() {
      var a = document.getElementById("mylink").hreflang;
      document.getElementById("myid").innerHTML = a;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、リンクと3つのボタンが表示されます。

ここで「Display password」ボタンをクリックすると、href属性に含まれるパスワード部分（この例では「mypwd123」）が画面に表示されます。

このように、passwordプロパティを使えば、JavaScriptから簡単にURL内のパスワード部分へアクセスできます。なお、URLに資格情報を含めることはセキュリティ上推奨されないため、実務では取り扱いに十分注意してください。

  1. HTML DOM パスワード入力フィールドのplaceholderプロパティの使い方

    HTML DOM の Input Password（パスワード入力）オブジェクトにおける placeholder プロパティは、パスワード入力フィールドの placeholder 属性の値を取得・設定するために使用されます。placeholder（プレースホルダー）は、ユーザーが何も入力していない状態で入力フィールド内にヒントとなるテキストを表示する機能です。デフォルトではグレー表示され、value プロパティとは異なり、フォーム送信時にはその値が送信されない点に注意してください。構文placeholder プロパティを設定する場合の構文は以下のとおりです。passwordObject.pla

  2. 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