HTMLAnchorElement インターフェイス
HTMLAnchorElement インターフェイスは、ハイパーリンク機能がある <a> エレメントオブジェクトを定義したインターフェイスです。
<a> はアンカー
エレメントとも呼ばれます。
<a> で利用できるプロパティ、メソッド、イベントがこのインターフェイスによって提供されます。
- EventTarget
- └ Node
- └ Element
- └ HTMLElement
- ┆
- ├ HTMLAnchorElement
- ┆
- └ HTMLElement
- └ Element
- └ Node
ページ移動を行うには、location.href の値を変更するか、location.replace() で URL を指定するか、または window.open() で URL を指定します。
location は window または document のオブジェクトです。
window.location.href = 'URL';
open() メソッドで開くウィンドウを指定して URL に遷移をすることもできます。
window.open('URL', '_blank');
HTMLAnchorElement インターフェイスは HTMLHyperlinkElementUtils ミックスインも取り込んでいます。
HTMLElement インターフェイスから継承しています。
その他
HTMLAnchorElement インターフェイスの focus() 、blur() メソッドによって任意にフォーカスを当てる、外すことができます。
HTML の送信先、url や src の替わりにjavascript:void(0);
設定することでそれ以上遷移しないようにできます。ただし、バブル機能がある場合にはエラーを起こすことがあるので注意して下さい。
ページ内 Index
プロパティ(Properties)
HTMLHyperlinkElementUtils ミックスインのプロパティを含んでいます。
<a> エレメントで使用されるプロパティ.accessKey、.tabindex は、 HTMLElement インターフェイスのプロパティです。
| プロパティ | 概要 | 分類 |
|---|---|---|
| .download | 値がダウンロードであることを明示。取得と設定ができる。DOMString 型 | |
| .hreflang | リンク先の言語使用。 DOMString 型。値は言語、地域コード | |
| .media | リンク先がメディアのためのファイルであることを明示。 DOMString 型 | |
| .referrerPolicy | リファラーポリシーをキーワードで指定。 DOMString 型 | |
| .rel | リンクタイプをキーワードで指定。 DOMString 型 | |
| .relList | <map> 関連。上記の rel 属性のリスト DOMTokenList オブジェクトを返す | |
| .target | リンク先の表示 Window の指定。iframe も指定できる。 DOMString 型 | |
| .text | <a> で包括する内容のテキスト。 DOMString 型Node.textContent プロパティと同じ。 | |
| .type | リンク先ファイルの MIME タイプ。 DOMString 型 |
HTMLElement インターフェイスから継承されたプロパティが使用できます。HTMLElement インターフェイスは Node 、Element インターフェイスを継承しています。
Nodeのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
Elementのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
HTMLElementのプロパティ一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
メソッド(Methods)
HTMLHyperlinkElementUtils ミックスインのメソッドを含んでいます。
| メソッド | 概要 | 分類 |
|---|
HTMLElement インターフェイスから継承されたメソッドで使用できるものがあります。 代表的なものは、フォーカスを操作できる HTMLElement.blur()、HTMLElement.focus() メソッドです。
Nodeのメソッド一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
Elementのメソッド一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
HTMLElementのメソッド一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
イベント(Event)
HTMLAnchorElement にイベントハンドラーを定義する方法には以下があります。
HTMLAnchorElement.addEventListener( 'click', ()=>{...} )
HTMLAnchorElement.onclick = function(){...}
<a onclick = "..." >
イベントについてはEventを参照してください。
上記の例では、<a> の onclick イベントハンドラーがありますが実際には使うことは簡単ではありません。<a> エレメントはクリックを前提としていますし、イベントがバブリングしますので処理が煩雑になることに注意してください。
GlobalEventHandlersのイベント一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
DocumentAndElementEventHandlersのイベント一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
HTMLElementのイベント一覧
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|