JavaScript プログラミング講座


アンカーについて（HTMLAnchorElement）



・アンカーについて
・アンカーを作成する
・リンク先の URL アドレスを設定する
・ハイパーリンクを無効化する
・ダウンロード用のリンクを設置する（HTML5 世代）
・アンカーのプロパティについて

前のページに戻る

　

アンカーについて

　


■アンカーについて


<A> タグを使用すると、ハイパーリンクを表示することができます。
　
<A> タグは、 Anchor（アンカー）の略です。
　
<A> タグを使用してハイパーリンクを設置する

<html>
  <body>

    <a href="https://hakuhin.jp/" target="_blank" >ハイパーリンクのテキスト</a>

  </body>
</html>
　
サンプル表示

ハイパーリンクのテキスト
　

■ HTMLAnchorElement インターフェースについて

　
HTMLAnchorElement インターフェースは、<A> タグに相当します。
　
エレメントの一種です。
　
ハイパーリンクを表示するための機能がまとまっています。
　
このページでは、HTMLAnchorElement インターフェースで供給される機能について解説しています。
　
■ HTMLAnchorElement インターフェースの派生について

HTMLAnchorElement インターフェースは、以下の様に派生しています。
　
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
　
Object
↓派生
EventTarget
↓派生
Node
↓派生
Element
↓派生
HTMLElement
↓派生
HTMLAnchorElement
　

上に戻る

　

アンカーを作成する

　
■アンカーを作成する
■アンカーを表示する
■任意のエレメントをハイパーリンク化する
■アンカーを取得する
　


■アンカーを作成する

　
■アンカー要素を動的に作成する
　
HTMLAnchorElement オブジェクトを作成するには、document.createElement() メソッドを使用します。
　
引数に、"a" を指定します。
　
動的に HTMLAnchorElement オブジェクトを作成する

// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// 出力テスト
console.log(anchor);
　

■アンカーをブラウザに表示する


HTMLAnchorElement オブジェクトを、ブラウザに表示するには、任意のノードリストに登録します。
　
アンカーを任意のノードリストに登録しただけでは、何も表示されません。
　
アンカーを動的に作成して、ノードリストに登録する

// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// BODY のノードリストに登録する
document.body.appendChild(anchor);
　

■任意のエレメントをハイパーリンク化する

　
アンカーのノードリストに、ハイパーリンク化したい任意のエレメントを登録します。
　
アンカーの子孫は、すべてハイパーリンク化されます。
　
ノードリストに登録する方法については、こちらで解説しています。
　
■テキストをハイパーリンク化する例
　
テキストノードを追加する方法は、こちらで解説してます。
　
　
テキストをハイパーリンク化する

// ------------------------------------------------------------
// アンカー
// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// ハイパーリンク先を指定
anchor.href = "http://example.com/";

// BODY のノードリストに登録する
document.body.appendChild(anchor);


// ------------------------------------------------------------
// アンカーに文字列をセットする
// ------------------------------------------------------------
anchor.textContent = "ハイパーリンク！！";
　
■イメージ画像をハイパーリンク化する例
　
イメージ画像については、こちらで解説しています。
　
　
画像をハイパーリンク化する

// ------------------------------------------------------------
// アンカー
// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成する
var anchor = document.createElement("a");

// ハイパーリンク先を指定
anchor.href = "http://example.com/";

// BODY のノードリストに登録する
document.body.appendChild(anchor);


// ------------------------------------------------------------
// 画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();

// URL を指定して、画像の読み込みを開始する
image.src = "https://example.com/graphic/title.png";


// ------------------------------------------------------------
// アンカーのノードリストに画像イメージを登録する
// ------------------------------------------------------------
anchor.appendChild(image);
　

■HTMLAnchorElement オブジェクトを取得する

　
■静的な <A> タグから取得する
　
任意のエレメントを取得する方法は、こちらで解説しています。
　
静的な <A> タグから、HTMLAnchorElement オブジェクトを取得する

<html>
  <body>

    <a id="aaa" href="https://hakuhin.jp/" target="_blank" >ハイパーリンクのテキスト</a>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var anchor = document.getElementById("aaa");

	// 出力テスト
	console.log(anchor);

    //-->
    </script>

  </body>
</html>
　
■ name 属性を持つアンカーをまとめて取得する
　
name 属性を持つアンカーのみを取得する事ができます。
　
ブラウザによっては、id 属性を持つアンカーも取得対象となります。
　
doucment.anchors プロパティを使用します。
　
HTMLCollection オブジェクトが得られます。
　
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
　
中には、HTMLAnchorElement オブジェクトが格納されています。
　
name 属性を持つアンカーをまとめて取得する

// ------------------------------------------------------------
// name 属性を持つアンカーをまとめて取得する
// ------------------------------------------------------------
var anchor_list = document.anchors;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = anchor_list.length;
for(i=0;i < num;i++){

	// HTMLAnchorElement オブジェクトを取得する
	var anchor = anchor_list[i];

	// 出力テスト
	console.log(anchor);
}
　
■ href 属性を持つエレメントをまとめて取得する
　
href 属性を持つ要素を、まとめて取得する事ができます。
　
<A> <AREA> 要素などが、取得対象となります。
　
doucment.links プロパティを使用します。
　
HTMLCollection オブジェクトが得られます。
　
HTMLCollection オブジェクトは、配列のように中身を取り出せます。
　
中には、HTMLElement オブジェクトが格納されています。
　
href 属性を持つ要素をまとめて取得する

// ------------------------------------------------------------
// href 属性を持つ要素をまとめて取得する
// ------------------------------------------------------------
var element_list = document.links;

// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
var i;
var num = element_list.length;
for(i=0;i < num;i++){

	// HTMLElement オブジェクトを取得する
	var element = element_list[i];

	// 出力テスト
	console.log(element);
}
　

上に戻る

　

ハイパーリンク先を設定する

　
■ハイパーリンク先のアドレスを設定する
■ターゲットウィンドウを設定する
　


■ハイパーリンク先のアドレスを設定する


ハイパーリンク先のアドレスを設定するには、href プロパティを使用します。
　
リンク先の URL アドレスを、文字列で指定します。
　
Data URI Scheme や Blob URL Scheme を指定する事もできます。
　
ハイパーリンク先を設定

// HTMLAnchorElement オブジェクトを作成
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://example.com/";
　

■ターゲットウィンドウを設定する


ターゲットウィンドウを設定するには、target プロパティを使用します。
　
以下の文字列を設定することができます。
　
文字列 説明
_self 現在のフレーム
_blank 新規にウィンドウを開く
_parent 現在のフレームから１つ上（親）のフレーム
_top 現在のフレームの最上位（ルート）のウィンドウ
それ以外の文字列 指定した名前のフレーム
　
ターゲットを設定

// HTMLAnchorElement オブジェクトを作成
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://example.com/";

// ターゲットを設定
anchor.target = "_blank";
　

上に戻る

　

ハイパーリンクを無効化する

　


■ハイパーリンクを無効化する


JavaScript を使って、ページの遷移をキャンセルすることができます。
　
以下のような場合に便利です。
　
JavaScript が使用不可能な場合、直接リンクとして機能させる。
　
JavaScript が利用可能な場合、ページ遷移をキャンセルして、ダイナミックな処理を行う。
　
■クリック時のデフォルトの動作を無効化する
　
リンクをクリックしたか調べるには、onclick イベントを使用します。
　
登録したコールバック関数の引数から、MouseEvent オブジェクトが得られます。
　
MouseEvent オブジェクトから、preventDefault() メソッドを実行します。
　
DOM Events 非対応環境では、false 値を返します。
　
ページの遷移をキャンセルする

<html>
  <body>

    <a id= "aaa" href="http://example.com" >ハイパーリンク！！</a>

    <script type="text/javascript">
    <!--

	// id 属性が、"aaa" であるエレメントを取得
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// クリックすると実行される関数
	// ------------------------------------------------------------
	function MouseClickFunc(e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// ページの遷移をキャンセルする
		// ------------------------------------------------------------
		if(e.preventDefault){
			// デフォルトの動作を無効化する
			e.preventDefault();
		}else{
			// デフォルトの動作を無効化する（非標準）
			return false;
		}
	}

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	// イベントリスナーに対応している
	if(element.addEventListener){

		// クリックすると実行されるイベント
		element.addEventListener("click" , MouseClickFunc);

	// アタッチイベントに対応している
	}else if(element.attachEvent){

		// クリックすると実行されるイベント
		element.attachEvent("onclick" , MouseClickFunc);

	}else{

		// クリックすると実行されるイベント
		element.onclick = MouseClickFunc;

	}
    //-->
    </script>

  </body>
</html>
　

上に戻る

　

ダウンロード用のリンクを設置する（HTML5 世代）

　


■ダウンロード用のリンクを設置する（HTML5 世代）


■download プロパティについて
　
HTML5 世代の機能です。
　
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element (The a element)
　
Internet Explorer 11 の時点では、動作しません。
　
Safari 7 の時点では、動作しないようです。
　
Opera(Presto 版) では、動作しません。
　
■ダウンロード用のリンクを設置する
　
ダウンロード用のリンクを設置するには、download プロパティを使用します。
　
デフォルトのファイル名を、文字列で指定します。
　
画像のダウンロード用のリンクを設置する

<html>
  <body>

    <a href="https://hakuhin.jp/graphic/title.png" download="my_image.png">ダウンロード！！</a>

  </body>
</html>
　

■自動的にダウンロードを開始する

　
自動的にダウンロードを開始したい場合は、click() メソッドを使用します。
　
任意のバイナリのダウンロードを開始する方法については、こちらで解説しています。
　
画像のダウンロードを自動的に開始する

// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成
// ------------------------------------------------------------
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "https://hakuhin.jp/graphic/title.png";

// ターゲットを設定
anchor.target = "_blank";

// デフォルトのファイル名を指定
anchor.download = "my_image.png";

// ------------------------------------------------------------
// 自動的にダウンロードを開始する
// ------------------------------------------------------------
// ノードリストに登録する
document.body.appendChild(anchor);

// アンカーを手動的にクリックする
anchor.click();
　

上に戻る

　

アンカーのプロパティについて

　


■アンカーのプロパティ一覧

　
HTMLAnchorElement インターフェースで利用可能な、プロパティの一覧です。（一部抜粋）
　
■ HTMLAnchorElement インターフェース
　
プロパティ名型説明
hrefStringリンク先の URL アドレスを設定する。
targetStringターゲットウィンドウを設定する。
relStringリンク元とリンク先の関連性を指定する。
hreflangStringリンク先の言語コードを設定する。
typeStringリンク先のコンテンツタイプを設定する。
　
■ HTML5 世代
　
プロパティ名型説明
textStringアンカー内のテキストを文字列として取得する。textContent と同等。
downloadStringデフォルトのファイル名を設定する。ダウンロード用のリンクとして機能する。
　
プロパティ名型説明
protocolString「リンク先の URL」から「プロトコル」を取得する。
hostString「リンク先の URL」から「ホスト名」 + 「ポート番号」を取得する。
hostnameString「リンク先の URL」から「ホスト名」を取得する。
portString「リンク先の URL」から「ポート番号」を取得する。
pathnameString「リンク先の URL」から「パス名」を取得する
searchString「リンク先の URL」から「クエリ」を取得する。
hashString「リンク先の URL」から「フラグメント識別子」を取得する。
　

■ URL decomposition IDL 属性（HTML5 世代）


リンク先の URL アドレスを分解して取得する事ができます。
　
ターゲットを設定

// ------------------------------------------------------------
// HTMLAnchorElement オブジェクトを作成
// ------------------------------------------------------------
var anchor = document.createElement("a");

// ハイパーリンク先を設定
anchor.href = "http://sub.example.com:8080/aaa/bbb/ccc.html?name=taro&age=18#FRAGMENT_IDENTIFIER";

// ------------------------------------------------------------
// テスト出力
// ------------------------------------------------------------
console.log(anchor.protocol);	// "http:"
console.log(anchor.host);	// "sub.example.com:8080"
console.log(anchor.hostname);	// "sub.example.com"
console.log(anchor.port);	// "8080"
console.log(anchor.pathname);	// "/aaa/bbb/ccc.html"
console.log(anchor.search);	// "?name=taro&age=18"
console.log(anchor.hash);	// "#FRAGMENT_IDENTIFIER"
　

上に戻る

　
前のページに戻る