要素
<a> 要素はリンクを設定するために使用されます。 Web ページ要素の共通インターフェース (Node インターフェース、Element インターフェース、HTMLElement インターフェース) に加えて、HTMLAnchorElement インターフェースおよび HTMLHyperlinkElementUtils インターフェースも継承します。
プロパティ
URL 関連のプロパティ
<a> 要素には、リンク アドレスを操作するために使用できる一連の URL 関連の属性があります。これらのプロパティの意味は、「Location」オブジェクトのインスタンス プロパティで確認できます。
- ハッシュ: フラグメント識別子 (
#で始まる) - host: ホストとポート (デフォルトのポート 80 と 443 は省略されます)
- ホスト名: ホスト名
- href: 完全な URL
- 発信元: プロトコル、ドメイン名、ポート
- パスワード: ホスト名の前のパスワード
- パス名: パス (
/で始まる) - ポート: ポート
- プロトコル: プロトコル (末尾のコロン「:」を含む)
- 検索: クエリ文字列 (
?で始まる) - ユーザー名: ホスト名の前のユーザー名
// HTMLコードは以下の通り
// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo">テスト</a>
var a = document.getElementById('test');
a.hash // "#foo"
a.host // "example.com:8081"
a.hostname // "example.com"
a.href // "http://user:passed@example.com:8081/index.html?bar=1#foo"
a.origin // "http://example.com:8081"
a.password // "パスワード"
a.pathname // "/index.html"
a.port // "8081"
a.protocol // "http:"
a.search // "?bar=1"
a.username // "ユーザー"
読み取り専用の「origin」プロパティを除き、これらのプロパティはすべて読み取り/書き込み可能です。
accessKey 属性
accessKey 属性は、<a> 要素のショートカット キーの読み取りと書き込みに使用されます。
// HTMLコードは以下の通り
// <a id="test" href="http://example.com">テスト</a>
var a = document.getElementById('test');
a.accessKey = 'k';
上記のコードは、<a> 要素のショートカット キーを k に設定します。今後、このショートカット キーが押されている限り、ブラウザは example.com にジャンプします。
ブラウザやオペレーティング システムが異なれば、ショートカット キー (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) を呼び出すためのファンクション キーの組み合わせも異なることに注意してください。たとえば、Linux システムでは、Chrome ブラウザで「example.com」にジャンプするには「Alt + k」を押す必要があります。
ダウンロード属性
「download」属性は、現在のリンクが閲覧用ではなくダウンロード用であることを示します。その値は、ユーザーがダウンロードしたファイル名を表す文字列です。
// HTMLコードは以下の通り
// <a id="test" href="foo.jpg">ダウンロード</a>
var a = document.getElementById('test');
a.download = 'bar.jpg';
上記のコードでは、<a> 要素は画像リンクです。デフォルトでは、画像はクリック後に現在のウィンドウにロードされます。 「download」属性を設定してこのリンクをクリックすると、ダウンロードダイアログボックスが表示され、保存場所を尋ねられます。ダウンロードされるファイル名は「bar.jpg」です。
hreflang 属性
hreflang 属性は、<a> 要素の HTML 属性 hreflang の読み書きに使用されます。これは、リンクが指すリソースの言語を示します (たとえば、hreflang="en")。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com" hreflang="en">テスト</a>
var a = document.getElementById('test');
a.hreflang // "en"
ReferrerPolicy 属性
referrerPolicy 属性は、<a> 要素の referrerPolicy HTML 属性の読み取りおよび書き込みに使用されます。これは、ユーザーがリンクをクリックしたときに HTTP ヘッダー情報の referer フィールドを送信する方法を指定します。
HTTP ヘッダー情報の「referer」フィールドは、現在のリクエストがどこから来たのかを示します。その形式は <a> 要素の referrerPolicy 属性で指定でき、3 つの値から選択できます。
no-referrer:referrフィールドを送信しません。origin:refererフィールドの値は、<a>要素のorigin属性、つまりプロトコル + ホスト名 + ポートです。unsafe-url:refererフィールドの値は、origin属性にパスを加えたものですが、#フラグメントは含まれません。この形式は最も詳細な情報を提供するため、情報漏洩の危険性があります。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com" Referrerpolicy="no-referrer">テスト</a>
var a = document.getElementById('test');
a.referrerPolicy // "リファラーなし"
rel 属性
rel 属性は、リンクと現在のドキュメント間の関係を示す <a> 要素の HTML 属性 rel の読み取りと書き込みに使用されます。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com" rel="license">license.html</a>
var a = document.getElementById('test');
a.rel // "ライセンス"
tabIndex プロパティ
tabIndex 属性の値は整数で、ドキュメント内の現在の <a> 要素のタブ キーの移動順序の読み取りおよび書き込みに使用されます。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com">テスト</a>
var a = document.getElementById('test');
a.tabIndex // 0
ターゲット属性
target 属性は、<a> 要素の HTML 属性 target の読み取りと書き込みに使用されます。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com" target="_blank">テスト</a>
var a = document.getElementById('test');
a.target // "_blank"
テキスト属性
text 属性は、<a> 要素のリンク テキストの読み書きに使用されます。これは、現在のノードの textContent 属性に相当します。
// HTMLコードは以下の通り
// <a id="test" href="https://example.com">テスト</a>
var a = document.getElementById('test');
a.text // "テスト"
型属性
type 属性は、リンク ターゲットの MIME タイプを表す <a> 要素の HTML 属性 type の読み取りおよび書き込みに使用されます。
// HTMLコードは以下の通り
// <a id="test" type="video/mp4" href="example.mp4">ビデオ</a>
var a = document.getElementById('test');
a.type // "ビデオ/mp4"
方法
<a> 要素のメソッドはすべて継承されており、主に以下の 3 つが含まれます。
blur(): 現在の要素からキーボード フォーカスを削除します。詳細については、HTMLElementインターフェイスの概要を参照してください。focus(): 現在の要素がキーボード フォーカスを取得します。詳細については、HTMLElementインターフェイスの概要を参照してください。toString(): 現在の<a>要素の HTML 属性hrefを返します。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0